如何更改边框的颜色 <td> 使用JavaScript？

Question

我正在尝试更改.html文件中<td>的颜色。 这是我所拥有的，但是由于某种原因，它似乎无法正常工作。

我的.html文件：

<table>
    <tr id = "table_row">
        <td>Computers</td>
        <td>Price</td>
        <td>Location</td>
   </tr>
</table>

现在我的.js文件：

function changeBorderColor() {
    var table = document.getElementById("table_row").getElementsByTagName("td");
    table.style.borderColor = "red";
}

为什么在激活changeBorderColor()函数时<td>不会更改颜色？ 在此先感谢您的提示和帮助！

Answer 1

getElementsByTagName()方法将返回与标签选择器匹配的元素数组。 因此，您需要遍历它以更改每个元素：

简单的例子：

function changeBorderColor() {
    var table = document.getElementById("table_row").getElementsByTagName("td");
    for(var i=0; i<table.length; i++) {
        var td = table[i];
        td.style.borderColor = "red";
    }
}

Answer 2

.getElementsByTagName("td")返回一个NodeList，您将必须遍历每个td并分别分配border 。

您还需要指定borderWidth和borderStyle属性。

 function changeBorderColor() { var td = document.getElementById("table_row").getElementsByTagName("td"); for (i = 0; i < td.length; i++) { td[i].style.borderColor = "red"; td[i].style.borderWidth = "1px"; td[i].style.borderStyle = "solid"; } } changeBorderColor() 

 <table> <tr id="table_row"> <td>Computers</td> <td>Price</td> <td>Location</td> </tr> </table> 

Answer 3

您可以在此处使用一些Jquery，例如：

function changeBackground(){

$("td").css("border","2px solid red");

}

Answer 4

如果允许使用jQuery，则下面是一个更详细的示例：

$('#table_row td').each(function(index){

   //Do something with each result. In this case - add a border
   $(this).css({ 'border': '1px solid red' });

});

这是jQuery示例的小提琴： http : //jsfiddle.net/k3d6peLy/

另外，如果您不必担心在IE8之前支持任何功能，则还可以使用JavaScript的'querySelectorAll（）'方法：

var elements = document.querySelectorAll('#table_row td');

for(var i = 0; i < elements.length; i++){
    elements[i].style.border = '1px solid red';
}

这是'querySelectorAll（）'示例的小提琴： http : //jsfiddle.net/k3d6peLy/1/