Автоматически добавлять содержимое на основе меток данных <th>к соответствующему <td>для адаптивного табличного представления

Question

Мне нужно автоматически добавить data-* ярлыки к td на основе содержимого их th.Таким образом, результат должен выглядеть примерно так:

<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, мне нужно сделать это с помощью простого JavaScript

. Для репрезентативных решений jQuery смотрите:1. Как скопировать соответствующий заголовок таблицы (th) в ячейку таблицы (td)?

Извлечь содержимое в атрибут метки данных td

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]);
    };
  });
};

Это явно неверно.Он присваивает метку data-th каждому td, но добавляет только первый символ в последней строке к каждому 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 не совпадают.

Второе редактирование:Функция разбита на несколько строк.Я исправил эту ошибку сейчас.