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!

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!

• javascript
• html
• css
• function
• html-table

• getElementsByTagName is a NodeSet – epascarello Commented Jan 27, 2015 at 20:35
• Also, how do you call changeBorderColor? – j08691 Commented Jan 27, 2015 at 20:36
• Are you using jQuery by chance? Or are you limited to using vanilla JavaScript? – Josh Taylor Commented Jan 27, 2015 at 20:39

4 Answers 4

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

.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>

You can use some Jquery here.For example:

function changeBackground(){

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

}

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/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/k3d6peLy/1/