表标题作为单元格中的标签

Question

我正在尝试使用JQuery使表头充当其列单元格中的标签。

我有这个：

<table>
   <thead>
      <tr>
         <th class="field-title">Title</th>
         <th class="field-name">Name</th>
         <th class="field-last">Last Name</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="field-title">Mr.</th>
         <td class="field-name">John</th>
         <td class="field-last">Doe</th>
      </tr>
   <tbody>
</table>

我希望JQuery要做的是根据列标题中的文本为该列下的每个单元格放置标签。

<table>
   <thead>
      <tr>
         <th class="field-title">Title</th>
         <th class="field-name">Name</th>
         <th class="field-last">Last Name</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="field-title"><strong>Title:</strong> Mr.</th>
         <td class="field-name"><strong>Name:</strong> John</th>
         <td class="field-last"><strong>Last Name:</strong> Doe</th>
      </tr>
   <tbody>
</table>

有什么想法吗？

Answer 1

您可以在Js中通过这种方式完成

const ths = document.querySelectorAll("tr th[class]");
const tds = document.querySelectorAll("tr td[class]");

for (var i = 0; i < tds.length; i++) {
  const label = "<strong>" + ths[i%ths.length].textContent + ": " + "</strong>";
  tds[i].innerHTML = label + tds[i].textContent;
}