Weborum Webmaster Forum > Expandable DOM table

Weborum Webmaster Forum > Web Page Design > Javascript

LeonP

Dec 5 2004, 12:30 PM

Hello everybody!

I did the table, which simplified variant is below. It's working fine, but I'm curious about:

1) Why, it doesn't work if I change from:

var tbody = document.getElementById(id);

<table><tbody id="newtab">

to:

var tbody = document.getElementById(id).getElementsByTagName(tbody);

<table id="newtab"><tbody>

2) Why it doesn't work if I use "var emptyTxtnode1" twice, instead of "var emptyTxtnode1" and "var emptyTxtnode2"

If anyone knows the answer I'd be very grateful. The code is here:

QUOTE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<head>
<title>Test </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="JavaScript" type="text/JavaScript">

function controlRows(id,control){
var tbody = document.getElementById(id);
var counter = document.getElementById(control).value;

if (tbody.childNodes.length > counter){

while (tbody.childNodes.length > counter) {
tbody.removeChild(tbody.lastChild);
   }
}


else {
while (tbody.childNodes.length < counter) {
var row = document.createElement("TR");
var rowCount = tbody.rows.length + 1;
var rowNumber = document.createTextNode(rowCount);
var emptyTxtnode1 = document.createTextNode('-');
var emptyTxtnode2 = document.createTextNode('-');
var theButton = document.createElement('input');

var td1 = document.createElement("TD");
var td2 = document.createElement("TD");
var td3 = document.createElement("TD");
var td4 = document.createElement("TD");

theButton.setAttribute('type','Button');
theButton.setAttribute('value','Button');

td1.appendChild(rowNumber);
td2.appendChild(emptyTxtnode1);
td3.appendChild(emptyTxtnode2);
td4.appendChild(theButton);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
tbody.appendChild(row);
   }
}
}
</script>

</head>
<body>
<form name="form1">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><select name="count" id="count" onChange="controlRows('newtab','count');">

<option value="5" selected>5</option>
<option value="10">10</option>
<option value="15">15</option>

</select></td>
<td>1</td>
<td>2</td>
<td>3</td>

</tr>
<tbody id="newtab">
</tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
<p>
<script language="JavaScript" type="text/JavaScript">
controlRows('newtab', 'count');
</script>
</body>
</html>

Willy Duitt

Dec 5 2004, 03:52 PM

Your first question:
As the S in elements implies... getElementsByTagName returns an array of all elements with the designated tagName... Therefore, irregardless that there is only one element with the tagName tbody you must still reference it by its place in the array....

var tbody = document.getElementById(id).getElementsByTagName('tbody')[0];
(Note: tagName needs to be quoted)

Your second question:
Again the S (or lack thereof) is indicative of the nature createElement... This method creates an element.... If its intention was to create numerous elements it would be plural (createElements).... Use cloneNode if you want to duplicate nodes... Text or otherwise...

Also, watch using firstChild and lastChild.... Because Mozilla treats whitespace as a textNode while IE does not.... Therefore, if you formatted your code in anyway as opposed to one long string without spaces or line breaks, you just may find yourself scratching your head trying to figure out why firstChild and lastChild are not returning what you thought they would....

Lastly, I would advise that you go over to W3C and read up on the DOM... Particularly thead, tbody and tfoot.... Not only is your default table structure incorrectly placing a tbody in the middle of the table (yes, you may use multiple tbody's... but you must use them consitently from the beginning) but since you are creating a new set of table rows, your script should be creating a tbody, appending the rows to that and appending the tbody to the table....

.....Willy

LeonP

Dec 5 2004, 08:19 PM

Thank you very much, Willy! Your response exceeded all my expectations. You REALLY helped me.

Leon

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.