внутренний HTML для значения атрибута Plain JavaScript

Question

Вот мой html

<table><thead>
    <tr>
        <th>Green</th>
        <th>Orange</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>First Stage A</td>
        <td>First Stage B</td>
    </tr>
    <tr>
        <td>Second Stage A</td>
        <td>Second Stage B</td>
    </tr>
</tbody></table>

Ожидаемый вывод

<table><thead>
    <tr>
        <th>Green</th>
        <th>Orange</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td data-label="Green">First Stage A</td>
        <td data-label="Orange">First Stage B</td>
    </tr>
    <tr>
        <td data-label="Green">Second Stage A</td>
        <td data-label="Orange">Second Stage B</td>
    </tr>
</tbody></table>

Вот сценарий

    var _th = document.querySelectorAll("table th")[0];
    var _th_value = _th.innerHTML;
    var _td = document.querySelectorAll("table td")[0];
    _td.setAttribute("basevalue", _th_value);

Как это можно сделать с помощью обычного JavaScript l oop. Я пытался понять это в течение нескольких часов, используя свои знания JavaScript. Но я не мог. Может ли кто-нибудь взглянуть и дать мне подсказку? Заранее спасибо.

Answer 1

Шаг 1: Сначала вы можете создать сопоставленный массив, содержащий значения цвета, которые вы можете получить из селектора table thead th. Сначала необходимо преобразовать HTMLCollection в массив с помощью ES6 Array.prototype.from , а затем выполнить сопоставление с помощью Array.prototype.map :

const table = document.querySelector('table');
const colors = Array.from(table.querySelectorAll('thead th')).map(th => th.innerText);

p / s: причина использования innerText состоит в том, что мы не включаем теги HTML, даже если в вашем примере innerHTML работает так же хорошо. Это просто личное предпочтение.

Шаг 2: Затем вы просто перебираете все элементы table tbody tr. На каждой итерации вы затем просматриваете все элементы td, которые можете найти, и с их индексом используйте dataset, чтобы назначить соответствующий цвет по индексу:

table.querySelectorAll('tbody tr').forEach(tr => {
  tr.querySelectorAll('td').forEach((td, i) => {
    td.dataset.color = colors[i];
  });
});

---

См. Подтверждение концепции ниже, где ячейки окрашены на основе атрибута data-color для простоты визуализации (вы также можете проверить DOM, чтобы увидеть добавленные правильные атрибуты HTML5 data-):

const table = document.querySelector('table');

// Collect colors into an array
const colors = Array.from(table.querySelectorAll('thead th')).map(th => th.innerText);

// Iterate through all `<tr>` elements in `<tbody>
table.querySelectorAll('tbody tr').forEach(tr => {

  // Iterate through all `<td>` in a particular row
  tr.querySelectorAll('td').forEach((td, i) => {
  
    // Assign color to HTML5 data- attribute
    td.dataset.color = colors[i];
  });
});

tbody td[data-color="Green"] {
  background-color: green;
}

tbody td[data-color="Orange"] {
  background-color: orange;
}

<table>
  <thead>
    <tr>
      <th>Green</th>
      <th>Orange</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First Stage A</td>
      <td>First Stage B</td>
    </tr>
    <tr>
      <td>Second Stage A</td>
      <td>Second Stage B</td>
    </tr>
  </tbody>
</table>

Answer 2

var tables = document.getElementsByTagName('table');

for (let table of tables) {
    var thead = table.children[0];
    var tbody = table.children[1];

    var index = 0;
    for (let th of thead.children[0].cells) {
        var color = th.innerHTML;

        for (let tr of tbody.children) {
            tr.children[index].setAttribute('data-label', color);
        }
        index++;
    }
}

Мне пришлось обработать индекс за пределами для l oop, потому что элементы children не являются простыми массивами, а HTMLCollections, и имеют другой способ их перебора.

edit: Добавлен l oop для перебора всех таблиц на странице