Question

我的网页包含多个<tr>，每个网页包含多个<td>。

我想自动添加name =＆＃34; blah＆＃34;通过CSS或JavaScript标记行中的每个<td>。

因此，实际上，每个<td>都来自：

<tr>
<td>Col 1 Text</td>
<td>Col 2 Text</td>
<td>Col 3 Text</td>
</tr>

要：

<tr>
<td name="col1">Col 1 Text</td>
<td name="col2">Col 2 Text</td>
<td name="col3">Col 3 Text</td>
</tr>

我需要这样做，因为我有一些JavaScript根据内容格式化单元格，并按<td>名称搜索单元格。

我是如何实现这一目标的？感谢。

Answer 1

使用setAttribute()

var tds = document.querySelectorAll('td');

for (var i = 0; i < tds.length; i++) {
  tds[i].setAttribute('name', 'col' + (i + 1));
}

td[name]{
  background:green;
  }

<table>
  <tr>
    <td>Col 1 Text</td>
    <td>Col 2 Text</td>
    <td>Col 3 Text</td>
  </tr>
</table>

Answer 2

var cells = document.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
    cells[i].setAttribute("name", "col" + i+1);
}

Answer 3

如果你想要这种风格

<tr>
    <td name="col1"></td>
    <td name="col2"></td>
</tr>
<tr>
    <td name="col1"></td>
    <td name="col2"></td>
</tr>

应用此JS

var tr = document.getElementsByTagName("tr");
for(var i=0; i<tr.length; ++i) {
    var td = tr[i].getElementsByTagName("td");
    for(vat j=0; j<td.length; ++j) {
        td[j].setAttribute("name","col"+(j+1));
    }
}

如果你想要这种风格

<tr>
    <td name="col1"></td>
    <td name="col2"></td>
</tr>
<tr>
    <td name="col3"></td>
    <td name="co42"></td>
</tr>

应用此JS

var td = document.getElementsByTagName("td");
for(var i=0; i<td.length; ++i) {
    td[i].setAttribute("name","col"+(i+1));
}

自动添加名称=＆＃34; blah＆＃34;标记为n

3 个答案: