setting border style for dynamically added row

[nanditasr]

Hi,
I am dynamically adding rows to a table, on the click of a button. The row consists of two columns, each with an input field.
I find that while the row and input field are getting added, I am not able to manipulate the border style or width.

Here is the relevant code:

function addRow(id)
{
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")

var td11 = document.createElement("INPUT")
td11.setAttribute("name","DeptIdTx"+counter);
td11.setAttribute("id","DeptIdTx"+counter);
td11.setAttribute("maxLength","10");
td11.setAttribute("style","border:0");


td1.appendChild(td11);
.....and more stuff here...
}

I find that the line td11.setAttribute("style","border:0") or even td11.setAttribute("style","border:none")

has no effect at all. Am I doing something wrong?

Thanks.

[Fang]

Probably not, it works in Godzilla. Maybe it's not fully supported in IE. If you add input selectors:

<style type="text/css">
<!--
INPUT {border :0px none;}
INPUT.xxxx {border :3px solid red;}
-->
</style>

Any new added input tags will have no border,
but any existing input tags with class xxxx will have a red border.

[nanditasr]

Thanks; this works