Menu
hi am new to the javascript world, was wondering if anyone could help me out on this one…
I am working on a table where the user can dynamically insert a row to the existing table upon pressing a button. I can get it to add a new row at the bottom of the table but my problem is I can’t get it to insert a checkbox or the highlight i wanted when mouse is over the new row (which btw i got from the forum here, thanks guys). Oh and was wondering if it would be possible to delete a row.
here’s the part of the code…
<style>
<!–
all.tblrow { cursor:hand }
//–>
</style>
<script language = “javascript”>
<!–
function addRow(id)
{
var tbody = document.getElementById(id).getElementsByTagName(“TBODY”)[0];
var row = document.createElement(“TR”)
// I don’t know if I’m using this method correctly ‘coz it’s not working ?
row.setAttribute(“class”, “tblrow”)
row.onmouseover = “bgOn(this, ‘#0099FF’)”
row.setAttribute(“onmouseout”, “bgOn(this, ‘#FFFFFF’)”)
var td1 = document.createElement(“TD”)
// this is where i wanted the checkbox but can’t seem to figure out how to do it
// var str ='<input type=”checkbox” name=”chkItem”>’
td1.appendChild(document.createTextNode(str))
var td2 = document.createElement(“TD”)
td2.appendChild (document.createTextNode(“Column2”))
var td3 = document.createElement(“TD”)
td3.appendChild(document.createTextNode(“Column3”))
var td4 = document.createElement(“TD”)
td4.appendChild (document.createTextNode(“Column4”))
var td5 = document.createElement(“TD”)
td5.appendChild(document.createTextNode(“Column5”))
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
tbody.appendChild(row);
}
function bgOn(obj, clr)
{
obj.style.backgroundColor = clr;
}
//–>
</script>
<body bgcolor=”#FFFFFF” text=”#000000″>
<form name=”form1″ method=”post” action=””>
<input type=button name=”btnAdd” value=”Add A Row” onclick=”addRow(‘tabBody’)”>
<div align=”center”>
<table id=”tabBody” border=”1″ width=”900″ bgcolor=”#FFFFFF”>
<tr class=”tblrow” onmouseover=”bgOn(this, ‘#0099FF’)” onmouseout=”bgOn(this, ‘#FFFFFF’)”>
<td width=”24″><input type=”checkbox” name=”chkItem”></td>
<td align=”left” width=”160″>A</td>
<td align=”left” width=”30″>B</td>
<td align=”left” width=”143″>C</td>
<td align=”left” width=”460″>D</td>
</tr>
</table>
</div>
</form>
</body>