Объединить столбец и содержимое таблицы, используя javascript
У меня несколько столбцов в таблице ниже. В приведенном ниже сценарии есть 3 столбца, которые я хочу объединить и создать один столбец с именем Development
Я хочу объединить 3 столбца: In Progress, Waiting for review, Fixed to only column with name 'Development ', а также объединить содержимое всех 3 столбцов в 1 столбец. Как это сделать с помощью javaScript или jquery?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-bordered mytable" id="mytable">
<thead class="sprint-board">
<tr>
<th scope="col" class="sprint-board">Product backlog items</th>
<th scope="col" class="sprint-board">New</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
</thead>
<tbody id="sprint_board">
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board"></th>
<th scope="col" class="sprint-board"></th>
<th scope="col" class="sprint-board"></th>
<th scope="col" class="sprint-board"></th>
<th scope="col" class="sprint-board"></th>
<th scope="col" class="sprint-board"></th>
<th scope="col" class="sprint-board"></th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
<tr class="sprint-board">
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</th>
<th scope="col" class="sprint-board">
<div class="card" style="width: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">width: 10rem;</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</th>
<th scope="col" class="sprint-board">In Progress</th>
<th scope="col" class="sprint-board">Waiting for Review</th>
<th scope="col" class="sprint-board">Fixed</th>
<th scope="col" class="sprint-board">In Testing</th>
<th scope="col" class="sprint-board">Resolved</th>
<th scope="col" class="sprint-board">Closed</th>
<th scope="col" class="sprint-board">Re-open</th>
</tr>
</tbody>
</table>