javascript - Jquery 克隆只重复一次。需要重复多次

Question

我正在处理 html 表中的一些现有代码。我需要从“th”标题行复制文本，并将它们复制到每个后续行的相应 td 单元格中。我设法复制了标题行，但它只会在第一行重复。我怎样才能让它在接下来的每一行上重复？谢谢!

$(document).ready(function() {
  $('.head').each(function(i) {
    var $content = $('.new').eq(i);
    $(this).clone().prependTo($content);
  });
});

table,
tbody,
tr,
th,
td {
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table id="table-container">
  <tbody>
    <tr class="header">
      <th class="head">Header 1</th>
      <th class="head">Header 2</th>
      <th class="head">Header 3</th>
      <th class="head">Header 4</th>
    </tr>
    <tr class="row>">
      <td class="new">Row 1</td>
      <td class="new">Row 2</td>
      <td class="new">Row 3</td>
      <td class="new">Row 4</td>
   </tr >
   <tr class="alt>">
      <td class="new">Row 1</td>
      <td class="new">Row 2</td>
      <td class="new">Row 3</td>
      <td class="new">Row 4</td>
    </tr>
  </tbody>
</table>
</div>

Answer 1

循环遍历除 .header 行之外的表格行，然后在内部循环遍历当前行的单元格，并在前面添加相应的 .head 单元格的克隆.

$(document).ready(function() {
  $('tr:not(.header)').each(function() {
    $(this).find('.new').each(function(i) {
       $(this).prepend($('.head').eq(i).clone());
    });
  });
});

table,
tbody,
tr,
th,
td {
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table id="table-container">
  <tbody>
    <tr class="header">
      <th class="head">Header 1</th>
      <th class="head">Header 2</th>
      <th class="head">Header 3</th>
      <th class="head">Header 4</th>
    </tr>
    <tr class="row>">
      <td class="new">Row 1</td>
      <td class="new">Row 2</td>
      <td class="new">Row 3</td>
      <td class="new">Row 4</td>
   </tr >
   <tr class="alt>">
      <td class="new">Row 1</td>
      <td class="new">Row 2</td>
      <td class="new">Row 3</td>
      <td class="new">Row 4</td>
    </tr>
  </tbody>
</table>
</div>