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:

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

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

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

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

:)

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

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

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:

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

Comments
helped me solve problem

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:

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

This question has already been answered. Start a new discussion instead.