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!
- 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
Reset to default 4The 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/