jQuery将表格的第一列复制到每个后续列

Question

我需要对移动端的表格进行一些调整。我的桌面版表格如下：

    <table>
                <thead>
                    <tr>
                        <th scope="row">&nbsp;</th>
                        <th scope="col">&nbsp;</th>
                        <th scope="col"><strong>Special Header</strong></th>
                        <th scope="col">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><strong>First</strong></th>
                        <td><strong>Second</strong></td>
                        <td><strong>Third</strong></td>
                        <td><strong>fourth</strong></td>
                    </tr>
                    <tr>
                        <th scope="row"><strong>Text</strong></th>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                </tbody>
            </table>

对于移动设备，我需要将第一列复制到所有其他列。表格应该看起来像：

<table>
                <thead>
                    <tr>
                        <th scope="row">&nbsp;</th>
                        <th scope="col">&nbsp;</th>
                        <th scope="row">&nbsp;</th>
                        <th scope="col"><strong>Special Header</strong></th>
                        <th scope="row">&nbsp;</th>
                        <th scope="col">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><strong>First</strong></th>
                        <td><strong>Second</strong></td>
                        <th scope="row"><strong>First</strong></th>
                        <td><strong>Third</strong></td>
                        <th scope="row"><strong>First</strong></th>
                        <td><strong>fourth</strong></td>
                    </tr>
                    <tr>
                        <th scope="row"><strong>Text</strong></th>
                        <td>Text</td>
                        <th scope="row"><strong>Text</strong></th>
                        <td>Text</td>
                        <th scope="row"><strong>Text</strong></th>
                        <td>Text</td>
                    </tr>
                </tbody>
            </table>

我发现了一些 jQuery 代码，但是这段代码只会将第一列添加到末尾：

$('#addcolumn').click(function() {
    
    $('table tr').each(function() {
      $(this).append($(this).find('th:first').clone());
    });

  });

请帮忙让我的Jquery代码解决问题，谢谢！ Martin

- matin

Answer 1

你可以使用insertAfter，这将在目标元素后插入匹配元素集合中的元素。所以，对于tbody > td，你可以循环遍历tr，并获取first th进行克隆，然后可以检查td是否不是tr的last-child，如果是的话，只需在该td后添加克隆的元素。现在，对于thead，你可以简单地使用eq(0)来获取第一个th，然后使用insertAfter在每个scope="col"的th后添加克隆。

演示代码：

$('#addcolumn').click(function() {
  ///loop through tds
  $('tbody  td').each(function() {
    //get th
    var clone = $(this).closest("tr").find('th:first').clone()
    //if td is not last
    if (!$(this).is(':last-child')) {
      $(clone).insertAfter(this); //insert the cloned th
    }
  });
  //get the header first th
  var headers = $("table").find("thead th:eq(0)").clone();
  //insert cloned to th where scope=col and not last child
  $(headers).insertAfter("thead th[scope=col]:not(:last-child)");


});
$('#normal').click(function() {
//remove th not first child from thead and tbody
$("thead th[scope=row]:not(:first-child)").remove();
$("tbody th[scope=row]:not(:first-child)").remove();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th scope="row">&nbsp;</th>
      <th scope="col">&nbsp;</th>
      <th scope="col"><strong>Special Header</strong></th>
      <th scope="col">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><strong>First</strong></th>
      <td><strong>Second</strong></td>
      <td><strong>Third</strong></td>
      <td><strong>fourth</strong></td>
    </tr>
    <tr>
      <th scope="row"><strong>Text</strong></th>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </tbody>
</table>


<button id="addcolumn">Add</button>
<button id="normal">Reset</button>

- Swati

---

非常感谢！我该如何销毁（重置）克隆代码。如果用户在横向使用平板电脑，则不应克隆...应显示正常表格。 - matin

编辑过了，请看一下 :) - Swati