如何用jQuery为表格tbody单元格前置对应列表头文本？解决重复添加问题

我需要实现表格响应式效果，计划通过jQuery将每列表头文本前置到该列的tbody单元格中，但目前所有表头文本都被重复添加到了所有tbody单元格里——比如预期显示「CompanyAlfreds Futterkiste」，实际却得到「CompanyContactCountryAlfreds Futterkiste」。

错误原因 #

当前代码遍历每个表头时，直接选中了所有<tbody>下的<td>，导致每个表头都会给所有单元格添加一次文本，最终所有表头文本叠加到了每个单元格中。

修正后的代码 #

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr> 
  </tbody>
</table>

CSS（无需修改）

span {
color: red;
font-weight: 700
}

jQuery（修正核心逻辑）

$('thead tr th').each(function(index) {
    var headerText = $(this).text();
    // 遍历tbody的每一行，找到当前行对应列索引的单元格
    $('table tbody tr').each(function() {
        $(this).find('td').eq(index).prepend(`<span>${headerText}</span>`);
    });
});

关键修改说明 #

1. 利用each回调的index参数，获取当前表头所在的列索引
2. 遍历tbody的每一行，通过eq(index)精准选中当前行对应列的单元格，避免选中所有单元格
3. 改用text()获取表头文本（比html()更安全，防止意外解析HTML内容），同时用模板字符串简化代码写法

内容的提问来源于stack exchange，提问作者abcid d