innerHTML到属性值纯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循环来完成。我尝试通过现有的JavaScript知识弄清楚几个小时。但是我不能。有人可以看看并给我提示吗？提前谢谢。

Answer 1

步骤1：

Answer 2

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

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