AJAX

Completely delete a table's elements

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2007

Posts: 72

Reputation: adaykin is an unknown quantity at this point

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Completely delete a table's elements

May 30th, 2009

Hello, I am trying to completely remove everything from a table. I want to delete all of the rows which I am able to do. But when I delete all of the rows and add rows in again there is whitespace at the top of the table and I can't figure out why it is there. Here is my code:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<style type="text/css">
td {
	font-size: 200%;
}
</style>
 
<script type="text/javascript">
function removeTables()
{
	var table = document.getElementById("myTable");
	for(var i = table.rows.length - 1; i >= 0; i--) {
		table.deleteRow(i);
	}
	document.getElementById("myTable").innerHTML = "";
}
 
function addTables()
{
	for(var i = 5; i >= 0; i--) {
		var row = document.createElement('tr');
		var cell1 = document.createElement('td');
		var cell2 = document.createElement('td');
		cell1.innerHTML = i + " Left";
		cell2.innerHTML = i + " Right";
		row.appendChild(cell1);
		row.appendChild(cell2);
		document.getElementById('myTable').appendChild(row);
	}
}
</script>
</head>
<body>
<table id="myTable" cellpadding="8" cellspacing="8" border="2">
 
</table>
<button onclick="removeTables();">Remove Elements</button>
<button onclick="addTables();">Add Elements</button>
</body>
</html>
<html>
<head>
<style type="text/css">
td {
	font-size: 200%;
}
</style>

<script type="text/javascript">
function removeTables()
{
	var table = document.getElementById("myTable");
	for(var i = table.rows.length - 1; i >= 0; i--) {
		table.deleteRow(i);
	}
	document.getElementById("myTable").innerHTML = "";
}

function addTables()
{
	for(var i = 5; i >= 0; i--) {
		var row = document.createElement('tr');
		var cell1 = document.createElement('td');
		var cell2 = document.createElement('td');
		cell1.innerHTML = i + " Left";
		cell2.innerHTML = i + " Right";
		row.appendChild(cell1);
		row.appendChild(cell2);
		document.getElementById('myTable').appendChild(row);
	}
}
</script>
</head>
<body>
<table id="myTable" cellpadding="8" cellspacing="8" border="2">

</table>
<button onclick="removeTables();">Remove Elements</button>
<button onclick="addTables();">Add Elements</button>
</body>
</html>

After I do an add elements, delete elements, and add elements again, there is whitespace at the top of the table. Repeat the process several times and the whitespace adds up. How do I remove this whitespace?

My Website <-- check out my site!

•

Join Date: Apr 2009

Posts: 119

Reputation: JugglerDrummer is an unknown quantity at this point

Solved Threads: 15

JugglerDrummer JugglerDrummer is offline

Offline

Junior Poster

Re: Completely delete a table's elements

May 30th, 2009

using document.getElementById("myTable").innerHTML = ""; will clear everything in the table, no other code required. You can add elements with innerHTML:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var tablehtml="";
var row="<tr>";
for (var i=0; i<number_of_tds; i++)
    row+="<td>" + content in td + "</td>";
row += "</tr>";
 
for (var i=0; i<number_of_trs; i++)
    tablehtml += row;
 
tableelement.innerHTML=tablehtml;
var tablehtml="";
var row="<tr>";
for (var i=0; i<number_of_tds; i++)
    row+="<td>" + content in td + "</td>";
row += "</tr>";

for (var i=0; i<number_of_trs; i++)
    tablehtml += row;

tableelement.innerHTML=tablehtml;

or use XML methods

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var table=document.createElement("table");
var row=document.createElement("tr");
for (var i=0; i<number_of_tds; i++)
    row.appendChild( document.createElement("td") );
 
for (var i=0; i<number_of_trs; i++)
    table,appendChild( row ); //you may need to make more rows to append, not sure
var table=document.createElement("table");
var row=document.createElement("tr");
for (var i=0; i<number_of_tds; i++)
    row.appendChild( document.createElement("td") );

for (var i=0; i<number_of_trs; i++)
    table,appendChild( row ); //you may need to make more rows to append, not sure

92% of all statistics are made up on the spot.

If you found a post helpful, please click the "give XXX reputation" link, to show your appreciation to those who helped you. Thanks! :D

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Completely delete a table's elements

May 30th, 2009

Or you could just create the whole table+elements, instead of having it preloaded in the page.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<style type="text/css">
td {
   font-size: 200%;
}
</style>
 
<script type="text/javascript">
function removeTables()
{  
document.getElementById("test").removeChild(document.getElementById("myTable"));
}
 
function addTables()
{   cTable = document.createElement("table");
   cTable.id = "myTable";
   cTable.border = "2";
   for ( var i = 0; i < 5; i++ ) {
      var row = document.createElement('tr');
      var cell1 = document.createElement('td');
      var cell2 = document.createElement('td');
      cell1.innerHTML = i + " Left";
      cell2.innerHTML = i + " Right";
      row.appendChild( cell2 );
      row.insertBefore( cell1, cell2 );
      cTable.appendChild( row );
  } document.getElementById("test").appendChild( cTable ); 
}
</script>
</head>
<body>
<div id="test">
 
</div>
<button onclick="removeTables();">Remove Elements</button>
<button onclick="addTables();">Add Elements</button>
 
</body>
</html>
<html>
<head>
<style type="text/css">
td {
   font-size: 200%;
}
</style>

<script type="text/javascript">
function removeTables()
{  
document.getElementById("test").removeChild(document.getElementById("myTable"));
}

function addTables()
{   cTable = document.createElement("table");
   cTable.id = "myTable";
   cTable.border = "2";
   for ( var i = 0; i < 5; i++ ) {
      var row = document.createElement('tr');
      var cell1 = document.createElement('td');
      var cell2 = document.createElement('td');
      cell1.innerHTML = i + " Left";
      cell2.innerHTML = i + " Right";
      row.appendChild( cell2 );
      row.insertBefore( cell1, cell2 );
      cTable.appendChild( row );
  } document.getElementById("test").appendChild( cTable ); 
}
</script>
</head>
<body>
<div id="test">

</div>
<button onclick="removeTables();">Remove Elements</button>
<button onclick="addTables();">Add Elements</button>

</body>
</html>

•

Join Date: Apr 2009

Posts: 859

Reputation: Airshow is on a distinguished road

Solved Threads: 122

Airshow

Online

Practically a Posting Shark

Re: Completely delete a table's elements

May 30th, 2009

Adaykin,

Original code didn't run in IE6. Would neither add nor delete. Part of the reason is that IE needs thead or tbody elements within a table to make rows addressable. IE also didn't like table.innerHTML = ''; This may also affect other browsers (not tested).

Solution: Remove id from the table and create <tbody id="myTable"></tbody> (in HTML). Add rows as before but delete rows with .removeChild() rather than deleteRow(); or .innerHTML = ""; .

Try this:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
td { font-size: 200%; }
</style>
 
<script type="text/javascript">
function removeRows() {
	var tableBody = document.getElementById('myTableBody');
	for(var i=(tableBody.rows.length-1); i>=0; i--) {
		tableBody.removeChild(tableBody.rows[i]);
	}
}
 
function addRows() {
	for(var i=0; i<=5; i++) {
		var row = document.createElement('tr');
		var cell1 = document.createElement('td');
		var cell2 = document.createElement('td');
		cell1.innerHTML = i + " Left";
		cell2.innerHTML = i + " Right";
		row.appendChild(cell1);
		row.appendChild(cell2);
		document.getElementById('myTableBody').appendChild(row);
	}
}
</script>
</head>
<body>
<button onclick="removeRows();">Remove Elements</button>
<button onclick="addRows();">Add Elements</button>
<table cellpadding="8" cellspacing="8" border="2">
<tbody id="myTableBody"></tbody>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
td { font-size: 200%; }
</style>

<script type="text/javascript">
function removeRows() {
	var tableBody = document.getElementById('myTableBody');
	for(var i=(tableBody.rows.length-1); i>=0; i--) {
		tableBody.removeChild(tableBody.rows[i]);
	}
}

function addRows() {
	for(var i=0; i<=5; i++) {
		var row = document.createElement('tr');
		var cell1 = document.createElement('td');
		var cell2 = document.createElement('td');
		cell1.innerHTML = i + " Left";
		cell2.innerHTML = i + " Right";
		row.appendChild(cell1);
		row.appendChild(cell2);
		document.getElementById('myTableBody').appendChild(row);
	}
}
</script>
</head>
<body>
<button onclick="removeRows();">Remove Elements</button>
<button onclick="addRows();">Add Elements</button>
<table cellpadding="8" cellspacing="8" border="2">
<tbody id="myTableBody"></tbody>
</table>
</body>
</html>

Should work cross-browser.

Airshow

Last edited by Airshow; May 30th, 2009 at 10:59 pm.

•

Join Date: Feb 2007

Posts: 72

Reputation: adaykin is an unknown quantity at this point

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Re: Completely delete a table's elements

May 30th, 2009

•

Originally Posted by Airshow

Adaykin,

Original code didn't run in IE6. Would neither add nor delete. Part of the reason is that IE needs thead or tbody elements within a table to make rows addressable. IE also didn't like table.innerHTML = ''; This may also affect other browsers (not tested).

Solution: Remove id from the table and create <tbody id="myTable"></tbody> (in HTML). Add rows as before but delete rows with .removeChild() rather than deleteRow(); or .innerHTML = ""; .

Try this:
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
td { font-size: 200%; }
</style>
 
<script type="text/javascript">
function removeRows() {
	var tableBody = document.getElementById('myTableBody');
	for(var i=(tableBody.rows.length-1); i>=0; i--) {
		tableBody.removeChild(tableBody.rows[i]);
	}
}
 
function addRows() {
	for(var i=0; i<=5; i++) {
		var row = document.createElement('tr');
		var cell1 = document.createElement('td');
		var cell2 = document.createElement('td');
		cell1.innerHTML = i + " Left";
		cell2.innerHTML = i + " Right";
		row.appendChild(cell1);
		row.appendChild(cell2);
		document.getElementById('myTableBody').appendChild(row);
	}
}
</script>
</head>
<body>
<button onclick="removeRows();">Remove Elements</button>
<button onclick="addRows();">Add Elements</button>
<table cellpadding="8" cellspacing="8" border="2">
<tbody id="myTableBody"></tbody>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> td { font-size: 200%; } </style> <script type="text/javascript"> function removeRows() { var tableBody = document.getElementById('myTableBody'); for(var i=(tableBody.rows.length-1); i>=0; i--) { tableBody.removeChild(tableBody.rows[i]); } } function addRows() { for(var i=0; i<=5; i++) { var row = document.createElement('tr'); var cell1 = document.createElement('td'); var cell2 = document.createElement('td'); cell1.innerHTML = i + " Left"; cell2.innerHTML = i + " Right"; row.appendChild(cell1); row.appendChild(cell2); document.getElementById('myTableBody').appendChild(row); } } </script> </head> <body> <button onclick="removeRows();">Remove Elements</button> <button onclick="addRows();">Add Elements</button> <table cellpadding="8" cellspacing="8" border="2"> <tbody id="myTableBody"></tbody> </table> </body> </html>
Should work cross-browser.

Airshow