Dynamicly Adding and Removing rows

Printable View

Sep 12th, 2001, 10:10 AM
msimmons

Dynamicly Adding and Removing rows

I start off with an empty table (<table id="tablename"></table>) then build it using asp in a hidden page and display it with a javascript outer html call. I preform other changes to cells in the table using asp and then an outer html in the same fashion. The problem I am stuck with now is I need to be able to replace 1 row with 4 rows and back again. I have tried using <span> tags which I thought would work and was the only idea that didnt cause a javascript 'unknwn runtime error'. The problem is that it is replacing the row but adding them outside of the table.
any suggestions?
thanks in advance,
Michael
Sep 12th, 2001, 01:45 PM
msimmons

I found out what is going on... how to fix it or why it is happening is still a mystery to me though. While building my new rows I have this snippet of code:
strTableTest = strTableTest & "<span id=""Room" & intRowCount & """><tr><td>blahblah</td></tr>"

now if I view my source to see what the inner html is submitting the <tr><td> (before the blahblah) is there... BUT if i view the source of the table after the outer html is complete the <tr><td> that I just mentioned is gone. WHY??? it is the only thing missing out of all that code and the whole reason this wont work. I have tried a few things... i tried putting the tr/td into a div and writing them in after writing the new row... once again the outerhtml states it is doing it but the finished product is still with out them.
Please help with any ideas or wild random guesses (I am desperate :)).
Thanks,
Michael
Sep 13th, 2001, 04:15 AM
JemimaChadwick

Michael,
U want to add rows to a table dynamically, if i'v understood ur requirement right!

Try this:

<script language=JavaScript>
function fun()
{
strDisplaySolTpcSeg="<TABLE width=525 border=1><TR><TD>Testing</TD></TR></TABLE>"
spanid.insertAdjacentHTML("BeforeEnd",strDisplaySolTpcSeg)
}
</script>
<html>
<input type=button value="Add New Row" onclick=fun()>
<table width=525 border=1>
<tr><td></td></tr>
</table>
<span id=spanid></span>

Hope this helps
-Jemima
Sep 13th, 2001, 04:37 AM
JemimaChadwick

The above code will only add rows ... if u need to delete rows also then use this:
NOTE: Here I have hard-coded the index of the array to be 0(1st element). So execute this sample by adding atleast 1 row. Also alter the index value logic of the array to suite ur requirement

<script language=JavaScript>
function fun()
{
strDisplaySolTpcSeg="<div><TABLE width=525 border=1><TR><TD>Testing</TD></TR></TABLE></div>"
spanid.insertAdjacentHTML("BeforeEnd",strDisplaySolTpcSeg)
}
function del()
{
var divs=document.all.tags("div");
divs(0).style.display='none';
}
</script>
<html>
<input type=button onclick=fun() id=button1 name=button1 value="Add New Row">
<input type=button onclick=del() id=button1 name=button1 value="Delete Row">
<table width=525 border=1>
<tr><td></td></tr>
</table>
<span id=spanid></span>

-Jemima
Sep 13th, 2001, 11:16 AM
msimmons

But will this only add/delete to the end of the table? I need to have it be able to replace a single row anywhere in the table with multiple rows and back again.
Thanks
Michael
Sep 13th, 2001, 11:38 PM
JemimaChadwick

Hmm..Try this

<script language=JavaScript>
function fun()
{
strDisplaySolTpcSeg="<div><TABLE width=525 border=1><TR><TD>Testing</TD></TR></TABLE></div>"
spanid.insertAdjacentHTML("BeforeEnd",strDisplaySolTpcSeg)
}
function del()
{
var divs=document.all.tags("div");
divs(0).style.display='none';
}
function rep()
{
var divs=document.all.tags("div");
strDisplaySolTpcSeg="<TABLE width=525 border=1><TR><TD>Replaced Text</TD></TR></TABLE>"
divs(0).outerHTML=strDisplaySolTpcSeg
}
</script>
<html>
<input type=button onclick=fun() id=button1 name=button1 value="Add New Row">
<input type=button onclick=del() id=button1 name=button1 value="Delete Row">
<input type=button onclick=rep() id=button1 name=button1 value="Replace Row">
<table width=525 border=1>
<tr><td></td></tr>
</table>
<span id=spanid></span>
Sep 14th, 2001, 08:59 AM
msimmons

It seems this is adding and replacing whole tables. Which won't work for me (at the moment). I will probably have to rewrite the whole project and your code has given me some ideas. It is so frustrating that I can do every thing to it that I need (and that is alot) and because of 8 charicters (<tr><td>) not inserting I have to rethink the whole thing.
Thanks
Michael
Sep 14th, 2001, 10:24 AM
JemimaChadwick

Well, Best wishes...
Nov 1st, 2001, 09:27 AM

Sorry im late. ;) But perhaps this example will help you on your way..

Code:

<HTML> <HEAD> <TITLE>Adding rows to table</TITLE> </HEAD> <SCRIPT LANGUAGE=javascript>  </SCRIPT> <BODY> <INPUT type="button" value="Add row" id="Add" name="Add" language=javascript onclick="return AddNewRow()"><br> <TABLE WIDTH=100% BORDER=1 CELLSPACING=1 CELLPADDING=1 ID="oTable"> <TR id="TRRow" name="TRRow"> <TD><b>Name</b></TD> <TD><b>Adres</b></TD> <TD><b>Birthday</b></TD> </TR> <TR id="TRRow" name="TRRow"> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE> </BODY></HTML>