DOM table simple question

K

King Albert

Why does the 'insertrow' work in this situation:

<html>
<script type="text/javascript">
function addRow(tableID) {
var tableRef = document.getElementById(tableID);
var newRow = tableRef.insertRow(2);
var newCell = newRow.insertCell(0);
var newText = document.createTextNode('New second cell')
newCell.appendChild(newText);
}
</script>
<table id="TableA">
<tr><td>firstcell</td><tr>
<tr><td>secondcell</td><tr>
<tr><td>thirdcell</td><tr>
</table>
<input type="button" value="try me" onclick="addRow('TableA');">
</html>


But not here (I didn't even bother to do the insertRow(2) here because
the domtable contains zero rows, I get 'index or size is negative or
greater than the nbr of rows') - just run the html below, please :

<html>
<head>
<script>
var arr=[];
arr[0]="first row";
arr[1]="second row";
arr[2]="third row";
arr[3]="fourth row";
function domtable() {
var myrow, mytd, mytext, mytable, attr;
mytable=document.createElement("table");
mytable.id='mijntabel';
for (i=0; i < arr.length ;i++){
myrow=document.createElement("tr");
mytd=document.createElement("td");
mytext=document.createTextNode(arr);
mytd.appendChild(mytext);
myrow.appendChild(mytd);
mytable.appendChild(myrow);

}
document.body.appendChild(mytable);
}
function howmanyrows() {
var eerstetabel = document.getElementsByTagName("table");
alert('the browser says that this table has ' + eerstetabel
[0].rows.length + ' rows, which is not true');
}
</script>
</head>
<body>
<input type="button" value="run me first" onclick="domtable();">
<input type="button" value="then check the number of rows"
onclick="howmanyrows();">
</body>
</html>

It appears you can only "count" the number of rows in a real html table.
In my app I have a DOM table whose rows start with a plus sign. If you
click the plus, a new row should insert beneath it. Do I really have to
"id attribute" every single 'plus cell', I was hoping I could use the
index of my for loop.
I also read some about tbody, but why is tbody not necessary in the first
example?

Targetbrowser is FF 1.5

thx for any advise.



Ward
 
M

Martin Honnen

King Albert wrote:

mytable=document.createElement("table");

Create a tbody e.g.
var tbody = document.createElement("tbody");
mytable.appendChild(tbody);
then insert the rows into the tbody e.g.
mytable.appendChild(myrow);

tbody.appendChild(myrow);

If the HTML parser parses the HTML table markup then it implicitly
creates a tbody child if it is not in the markup.
 
K

King Albert

King Albert wrote:



Create a tbody e.g.
var tbody = document.createElement("tbody");
mytable.appendChild(tbody);
then insert the rows into the tbody e.g.


tbody.appendChild(myrow);

If the HTML parser parses the HTML table markup then it implicitly
creates a tbody child if it is not in the markup.


thx for your advise,

The alert box below now acknowledges 4 rows.
Thx very much,

Ward

<html>
<head>
<script>
var arr=[];
arr[0]="first row";
arr[1]="second row";
arr[2]="third row";
arr[3]="fourth row";

function domtable() {
var myrow, mytd, mytext, mytable, attr;
mytable=document.createElement("table");
mytable.id='mijntabel';
mytbody=document.createElement("tbody");

for (i=0; i < arr.length ;i++){
myrow=document.createElement("tr");
mytd=document.createElement("td");
mytext=document.createTextNode(arr);
mytd.appendChild(mytext);
myrow.appendChild(mytd);
mytbody.appendChild(myrow);
}
mytable.appendChild(mytbody);
document.body.appendChild(mytable);


}


function howmanyrows() {
var eerstetabel = document.getElementsByTagName("tbody");
alert('the browser says that this table has ' + eerstetabel
[0].rows.length + ' rows, which is true');


}
</script>
</head>
<body>

<input type="button" value="run me first" onclick="domtable();">

<input type="button" value="then check the number of rows"
onclick="howmanyrows();">

</body>

</html>
 
R

RobG

King said:
thx for your advise,

The alert box below now acknowledges 4 rows.
Thx very much,

An alternative is to use insertRow(-1) which will insert the row as the
last row and you don't have to explicitly create the tbody. Use
insertCell(-1) for the cells.

<html>
<head>
<script>
var arr=[];
arr[0]="first row";
arr[1]="second row";
arr[2]="third row";
arr[3]="fourth row";

function domtable() {
var myrow, mytd, mytext, mytable, attr;
mytable=document.createElement("table");
mytable.id='mijntabel';
mytbody=document.createElement("tbody");

for (i=0; i < arr.length ;i++){
myrow=document.createElement("tr");
mytd=document.createElement("td");
mytext=document.createTextNode(arr);
mytd.appendChild(mytext);
myrow.appendChild(mytd);
mytbody.appendChild(myrow);
}
mytable.appendChild(mytbody);



Or don't insert the tbody and:

for (var i=0; i < arr.length ;i++){
myrow = mytable.insertRow(-1);
mytd = myrow.insertCell(-1);
mytd.appendChild(document.createTextNode(arr));
}
document.body.appendChild(mytable);


}

[...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top