PDA

Click to See Complete Forum and Search --> : how to dynamically insert a row in a table

zwirley
03-05-2003, 09:25 PM
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 :confused:
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>
skriptor
03-06-2003, 02:13 AM
Hi,
here are some changes for your code:

1.
<style>
.tblrow { cursor:hand; }
</style>


2. new function
function blue() {
bgOn(this, '#0099FF');
}

3.
row.setAttribute("className", "tblrow");
row.onmouseover = blue;

4.
var str = document.createElement( "INPUT" );
str.setAttribute( "type", "checkbox" );
str.setAttribute( "name", "chkItem" );
td1.appendChild( str );

This works with IE.
Good luck, skriptor
zwirley
03-06-2003, 07:29 PM
skriptor, thanks a lot!!! it's working perfectly well now! :)