JavaScript遍历每个TR，并为每个TD集合分配一个具有TH值的data-label属性

Question

我有一个表，其中有5个TH，然后有可变数量的TR，它们都包含5个TD。我想为每个TD集合分配一个数据标签，并带有TH集合的值。

这是我想要的结果

<table class="table" id="basket">

<thead>
    <tr>
        <th>Item name</th>
        <th>Type</th>
        <th>Price</th>
        <th class="middlecolumnbasket">Frequency</th>
        <th>Remove</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td data-label="Item name">Product 1</td>
        <td data-label="Type">Download</td>
        <td data-label="Price">€4.99 </td>
        <td data-label="Frequency">Each month</td>
        <td data-label="Remove" align="center">
            <input type="checkbox" name="delete244113" value="1">
        </td>
    </tr>
    <tr>
        <td data-label="Item name">Product 2</td>
        <td data-label="Type">Download</td>
        <td data-label="Price">€99.99 </td>
        <td data-label="Frequency">Each year</td>
        <td data-label="Remove" align="center">
            <input type="checkbox" name="delete245466" value="1">
        </td>
    </tr>
    <tr>
        <td data-label="Item name">Product 3</td>
        <td data-label="Type">Download</td>
        <td data-label="Price">€99.99 </td>
        <td data-label="Frequency">Each year</td>
        <td data-label="Remove" align="center">
            <input type="checkbox" name="delete253047" value="1">
        </td>
    </tr>
    <tr>
        <td data-label="Item name">Product 4</td>
        <td data-label="Type">Download</td>
        <td data-label="Price">€29.99 </td>
        <td data-label="Frequency">Each year</td>
        <td data-label="Remove" align="center">
            <input type="checkbox" name="delete253053" value="1">
        </td>
    </tr>
    <tr>
        <td data-label="Item name">Product 5</td>
        <td data-label="Type">Download</td>
        <td data-label="Price">€49.99 </td>
        <td data-label="Frequency">Each year</td>
        <td data-label="Remove" align="center">
            <input type="checkbox" name="delete253055" value="1">
        </td>
    </tr>
</tbody>

但是我只能得到第一套TD

这是我的代码

var tr = document.getElementsByTagName('tr');
for (var a = 0; a < tr.length; a++) {
    var td = document.getElementsByTagName('td');
    for (var b = 0; b < td.length; b++) {
        var th = document.getElementsByTagName('th');
        for (var c = 0; c < th.length; c++) {
            var content = th[c].innerHTML;
            td[c].setAttribute("data-label", content);
        }
    }
}

<table class="table" id="basket">

    <thead>
        <tr>
            <th>Item name</th>
            <th>Type</th>
            <th>Price</th>
            <th class="middlecolumnbasket">Frequency</th>
            <th>Remove</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Product 1</td>
            <td>Download</td>
            <td>€4.99 </td>
            <td>Each month</td>
            <td align="center">
                <input type="checkbox" name="delete244113" value="1">
            </td>
        </tr>
        <tr>
            <td>Product 2</td>
            <td>Download</td>
            <td>€99.99 </td>
            <td>Each year</td>
            <td align="center">
                <input type="checkbox" name="delete245466" value="1">
            </td>
        </tr>
        <tr>
            <td>Product 3</td>
            <td>Download</td>
            <td>€99.99 </td>
            <td>Each year</td>
            <td align="center">
                <input type="checkbox" name="delete253047" value="1">
            </td>
        </tr>
        <tr>
            <td>Product 4</td>
            <td>Download</td>
            <td>€29.99 </td>
            <td>Each year</td>
            <td align="center">
                <input type="checkbox" name="delete253053" value="1">
            </td>
        </tr>
        <tr>
            <td>Product 5</td>
            <td>Download</td>
            <td>€49.99 </td>
            <td>Each year</td>
            <td align="center">
                <input type="checkbox" name="delete253055" value="1">
            </td>
        </tr>
    </tbody>
</table>

我希望使用纯JavaScript来实现。 谢谢！

Answer 1

首先获取每个th的文本内容，将它们放入数组，然后可以遍历每个tr并分配{{1}的第i个孩子}数组中第tr项的data-label：

i

const labels = Array.from(
  document.querySelectorAll('#basket th'),
  th => th.textContent
);
document.querySelectorAll('tr').forEach((tr) => {
  [...tr.children].forEach((td, i) => {
    td.setAttribute("data-label", labels[i]);
  });
});
console.log(document.body.innerHTML);