Completely delete a table's elements

Question

adaykin 0 Junior Poster in Training

15 Years Ago

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?

javascript

4 Contributors
4 Replies
217 Views
8 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by adaykin

Airshow 416 WiFi Lounge Lizard

15 Years Ago

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

adaykin commented: helped me solve problem +3

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

JugglerDrummer 0 Junior Poster · Answer 1 · 2009-05-31T07:36:02+00:00

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

:)

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-05-31T07:48:06+00:00

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 0 Junior Poster in Training · Answer 3 · 2009-05-31T08:23:43+00:00

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!