如何用纯JS来定位每一行的第一个td？

Question

我试图将每行中第一个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';

请不要Jquery.

Answer 1

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

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/

Answer 2

纯JS？我第一次听到任何一个人说PURE JS只能用CSS做这个

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

要么

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