如何用純JS定位每一行的第一個td？

我試圖將每行中第一個td元素的顏色改爲紅色。如何用純JS定位每一行的第一個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，請。

來源

2013-05-13 dzumla011

使用行和單元格訪問表的行和列做到這一點。請參見下面的代碼，

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 
}

DEMO：http://jsfiddle.net/QNEyx/

來源

2013-05-13 19:47:17

這是如何使用內置的瀏覽器API完成的。這就是說，在生產中使用它是毫無意義的，因爲在JavaScript中創建更好（更短，更易讀）的API是微不足道的。 – 2013-05-13 19:51:05

@ŠimeVidas如果OP想重用這個，他們可以想出如何將它放入函數中。這不是問題的答案 – Ian 2013-05-13 19:54:57

@ŠimeVidas這個答案對於這個問題是非常具體的_如何以純JS爲目標的每一行的第一個TD？_這個問題的目的可以是從學習到產品的任何事情。 – 2013-05-13 19:57:13

Pure JS？我聽說第1次任意一個說法純JS時，你可以只用CSS

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

或者

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

來源

2013-05-13 19:46:57

正如另一個回答說，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)); 
}

使用樣式表的好處是，你避免競爭狀態（情況下，當表是動態生成的）。

來源

2013-05-13 20:08:53 Christophe

謝謝，但我想用純JS來做這個學習的目的。儘管在另一種意義上你的答案也有幫助。 – dzumla011 2013-05-13 20:13:11

@ dzumla011我的答案是純粹的JavaScript！（使用js動態創建節點） – Christophe 2013-05-13 20:14:47

是的，但我想直接用JS定位第一個td。 – dzumla011 2013-05-13 20:15:41

如何用純JS定位每一行的第一個td？

回答

相關問題