动态获取prepend()

Question

我在后端生成了一个表。我的任务是在每个标题列中包装文本，并使用.html()和.prepend()将其添加到每个正文列单元格中。它如预期的那样工作(您将看到绿色文本)。

问题:表是在后端生成的，有时表有3列，有时有4列或更多！如何动态地编写Jquery以便在每个表上工作。

请帮我一把。谢谢!

​

$(document).ready(function() {
  var firstHead = $("table thead tr th:first-child").html();
  var firstBodyCode = $("<span></span>").text(firstHead);
  $('table tbody tr td:first-child').prepend(firstBodyCode);

  var secondHead = $("table thead tr th:nth-child(2)").html();
  var secondBodyCode = $("<span></span>").text(secondHead);
  $('table tbody tr td:nth-child(2)').prepend(secondBodyCode);
});

table {
  width: 100%;
  border: 1px solid gray
}

span {
  color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

​

Answer 1

使用循环对所有列进行迭代。

​

$(document).ready(function() {
  $("table thead tr th").each(function(i) {
    let bodyCode = $("<span>", {
      text: $(this).text()
    });
    $(`table tbody tr td:nth-child(${i+1})`).prepend(bodyCode);
  });
});

table {
  width: 100%;
  border: 1px solid gray
}

span {
  color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

​