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=http://www.webdeveloper.com/forum/archive/index.php/"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>
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=http://www.webdeveloper.com/forum/archive/index.php/"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>