Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1075

May 30th, 2009

Completely delete a table's elements

Expand Post »

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:

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?

Similar Threads

Connection.Execute command to Delete Records from MS Access Database Table in Visual Basic 4 / 5 / 6
how to delete duplicate record in a table by using SQL query in MS SQL
How to update/delete linking table records in SQL server 2005 - Help needed in ASP.NET
Using INSERT, then DELETE from another table in ASP
Please Help Me in Viruses, Spyware and other Nasties

adaykin

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

73 posts
since Feb 2007

Permalink

May 30th, 2009

Re: Completely delete a table's elements

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

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

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

JugglerDrummer

Reputation Points: 14

Solved Threads: 22

Junior Poster

Offline

138 posts
since Apr 2009

Permalink

May 30th, 2009

Re: Completely delete a table's elements

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

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>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

May 30th, 2009

Re: Completely delete a table's elements

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:

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.

Airshow

Sponsor

Reputation Points: 318

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,526 posts
since Apr 2009

Permalink

May 30th, 2009

Re: Completely delete a table's elements

Click to Expand / Collapse Quote 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:
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

Thanks Airshow, that's what I was looking for!

adaykin

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

73 posts
since Feb 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: javascript function issue

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Positioning Ajax Window in Parent Window

DaniWeb Message

Cancel Changes

User Name
Password