Question

I am dynamically adding borders to a table with this code on jsfiddle and it works in FF and Chrome, but doesn’t work (or throw any errors) in IE8. Can anyone tell me what’s wrong?

[EDIT]
It’s not exactly an answer to the specific question, but the best solution for my real problem was dynamically setting (adding) a css class – this worked in all browsers I’m concerned with:

CSS:

td.bleft {
border-left:2px solid black;
}

JS code (where “cell” refers to a td element):

cell.className += " bleft";

Answer 1

You have to update composite “convenience” styles by the individual parts. Your fiddle, updated.

Here’s the code:

for (var i = 0; i < tbl.rows.length; i++) {
    tbl.rows[i].cells[0].style["borderRightWidth"] = "2px";
    tbl.rows[i].cells[0].style["borderRightColor"] = "black";
    tbl.rows[i].cells[0].style["borderRightStyle"] = "solid";
}

Yours did not work in Firefox for me (until I changed it).