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

Question

I'm trying to change the colour of a <td> in my .html file. Here is what I have but for some reason it doesn't seem to be working.

My .html file:

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

And now my .js file:

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

Why doesn't my <td> change colour when I activate the changeBorderColor() function? Thanks in advance for any tips and help!

Answer 1

The getElementsByTagName() method will return an array of elements matching the tag selector. So you would need to iterate througth it to change each element:

Simple example:

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 a NodeList, you will have to loop through each td and assign the border individually.

You also need to specify the borderWidth and borderStyle properties.

 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

You can use some Jquery here.For example:

function changeBackground(){

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

}

Answer 4

If you are allowed to use jQuery, here is a slightly more verbose example:

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

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

});

Here is a fiddle for the jQuery example: http://jsfiddle.net/k3d6peLy/

Alternatively, if you don't have to worry about supporting anything before IE8, you could also use JavaScript's 'querySelectorAll()' method:

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

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

Here is a fiddle for the 'querySelectorAll()' example: http://jsfiddle.net/k3d6peLy/1/