javascript - 自动将基于数据标签的 内容附加到相应的 以实现响应式表格 View

Question

我需要根据相应th 的内容自动将data-* 标签附加到td。所以，结果应该是这样的:

<table class="table">
  <thead class="bg-gray-100">
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
      <th>Heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Heading 1">table cell content</td>
      <td data-label="Heading 2">table cell content</td>
      <td data-label="Heading 3">table cell content</td>
      <td data-label="Heading 4">table cell content</td>
      <td data-label="Heading 5">table cell content</td>
    </tr>
  </tbody>
</table>

虽然有许多 jQuery 解决方案，但我需要使用 vanilla JavaScript 来完成它

有关代表性的 jQuery 解决方案，请参阅:1. How can I copy the corresponding table header (th) to their table cell (td)?

1. Pull th content into a td data-label attribute

2. https://j.eremy.net/responsive-table/ )

我喜欢使用 element.cellIndex 的解决方案，但似乎无法使其工作。

我做了各种错误的尝试。

这是我最近一次失败的尝试:

function addMobileTableData() {
  var table = document.querySelector('.table');
  var th = table.querySelectorAll('th');
  var td = table.querySelectorAll('td');
  var tdCollection = Array.from(td);
  var thCollection = Array.from(th);
  var thCount = th.length;
  tdCollection.forEach(function(tdItem, index){
    for (index = 0; index < thCount; index++) {
      var headerLabel = thCollection[index].innerHTML;
      console.log(headerLabel);
      tdItem.setAttribute('data-th', headerLabel[index]);
    };
  });
};

这显然是不正确的。它为每个 td 分配一个 data-th 标签，但仅将最后一个字符串中的第一个字符附加到每个 td。

如果您赶时间，请提供提示。对我做错了什么的解释会很好。一个完整的工作解决方案是 Fan-Freaking-Tastic。

但是，我会得到我能得到的。

谢谢。

Answer 1

其实你们很亲近。原来你正在访问你返回的标题标签的字符串，因此为什么只返回第一个字符。额外的循环也是不必要的。下面的工作代码片段:

function addMobileTableData() {
  var table = document.querySelector('.table');
  var bodyTrCollection = table.querySelectorAll('tbody tr');
  var th = table.querySelectorAll('th');
  var thCollection = Array.from(th);

  for (var i = 0; i < bodyTrCollection.length; i++) {
    var td = bodyTrCollection[i].querySelectorAll('td');
    var tdCollection = Array.from(td);
    for (var j = 0; j < tdCollection.length; j++) {
      if (j === thCollection.length) {
        continue;
      }
      var headerLabel = thCollection[j].innerHTML;
      tdCollection[j].setAttribute('data-th', headerLabel);
    }
  }
};
addMobileTableData();

<table class="table">
  <thead class="bg-gray-100">
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
      <th>Heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
    </tr>
    <tr>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
    </tr>
    <tr>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
      <td>table cell content</td>
    </tr>
  </tbody>
</table>

编辑:当 th 和 tds 的数量不匹配时，添加了一个额外的检查来解释场景。

第二次编辑:函数分解为多行。我现在已经修正了这个错误。