Dynamicly Adding and Removing rows

**msimmons** · Sep 12th, 2001, 10:10 AM

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

**msimmons** · Sep 12th, 2001, 01:45 PM

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

**JemimaChadwick** · Sep 13th, 2001, 04:15 AM

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

**JemimaChadwick** · Sep 13th, 2001, 04:37 AM

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

**msimmons** · Sep 13th, 2001, 11:16 AM

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

**JemimaChadwick** · Sep 13th, 2001, 11:38 PM

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>

**msimmons** · Sep 14th, 2001, 08:59 AM

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

**JemimaChadwick** · Sep 14th, 2001, 10:24 AM

Well, Best wishes...

kayoca · 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>
<!--
function AddRow(Name, Adress, Birthday){
  
  var oRow1=oTable.insertRow(oTable.rows.length);
  var aRows=oTable.rows;
  var aCells=oRow1.cells;
  
  oRow1.id='TRRow'; 
  oRow1.name='TRRow';
  
  var oCell1_1 = aRows(oRow1.rowIndex).insertCell(aCells.length);
  var oCell1_2 = aRows(oRow1.rowIndex).insertCell(aCells.length);
  var oCell1_3 = aRows(oRow1.rowIndex).insertCell(aCells.length);

  oCell1_1.innerText = Name;
  
  oCell1_2.innerHTML = Adress;
  
  oCell1_3.innerHTML = Birthday;

}

function AddNewRow(){

  AddRow('Testname' + TRRow.length, 'Where'  + TRRow.length, '01/01/2001');

}

//-->
</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>

Thread: Dynamicly Adding and Removing rows

Thread Tools

Display

Dynamicly Adding and Removing rows

Posting Permissions