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

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";
}

为什么我的 <td> 在激活 changeBorderColor() 功能时没有改变颜色？在此先感谢您的任何提示和帮助！

Answer 1

getElementsByTagName() 方法将 return 一个与标签选择器匹配的元素数组。所以你需要遍历它来改变每个元素：

简单例子：

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") returns 一个 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 here.For 示例：

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 示例的 fiddle：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()' 示例的 fiddle：http://jsfiddle.net/k3d6peLy/1/

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

How can I change the border colour of a <td> using JavaScript?

html

javascript

css

html-table

function