Объединить столбец и содержимое таблицы, используя JavaScript - PullRequest
0 голосов
/ 06 мая 2020

Объединить столбец и содержимое таблицы, используя 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...