如何用纯JS瞄准每一行的第一个td

How to target first td of every row with pure JS?

本文关键字：一行 td 第一个 JS 何用纯      更新时间：2023-09-26

我尝试将每行中第一个td元素的颜色更改为红色。

HTML: 

<table id="test">
<tr>
    <td>test1</td>
    <td>test2</td>
</tr>
<tr>
    <td>test3</td>
    <td>test4</td>
</tr>
</table>

我试过这个JS:

var tr = document.getElementsByTagName('tr');
tr.firstChild.style.color = 'red';

使用行和单元格访问表的行和列。见下面的代码，

var table = document.getElementById('test');
for (var i = 0; i < table.rows.length; i++) {
   var firstCol = table.rows[i].cells[0]; //first column
   firstCol.style.color = 'red'; // or anything you want to do with first col
}
演示:

http://jsfiddle.net/QNEyx/

用JS解析可能会很昂贵，如果你可以用CSS实现同样的目标，那么你就开始吧。

#test tr td:nth-of-type(1) {
   color: red;
}

或

#test tr td:first-child {
   color: red;
}

正如另一个回复所说，css是实现这一目标的自然方式。

当你坚持使用js时，你可以使用js在你的页面中注入一个样式表:

var styleNode=document.createElement("style");
document.head.appendChild(styleNode);
var cssString="#test tr td:first-child {color: red;}";
if (styleNode.styleSheet) { // IE
  styleNode.styleSheet.cssText = cssString;
}
else {
  styleNode.appendChild(document.createTextNode(cssString));
}
使用样式表的好处是可以避免竞争条件(动态构建表的情况)。
相关文章：