Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > DOM table simple question

Reply
Thread Tools

DOM table simple question

 
 
King Albert
Guest
Posts: n/a
 
      05-14-2006


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[i]);
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
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      05-14-2006


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.

--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
 
 
 
King Albert
Guest
Posts: n/a
 
      05-14-2006
Martin Honnen <> wrote in news:44675a6f$0$11078
$:

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



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[i]);
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>

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      05-14-2006
King Albert wrote:
> Martin Honnen <> wrote in news:44675a6f$0$11078
> $:
>
>>
>> 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.
>>

>
>
> 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[i]);
> 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[i]));
}

> document.body.appendChild(mytable);
>
>
> }


[...]

--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Convert a XML DOM Object to a HTML DOM Object manjunath.d@gmail.com XML 0 09-20-2005 08:16 AM
What is the difference between DOM Level 1 and DOM Level 2. mike XML 1 11-20-2004 03:19 PM
Table/table rows/table data tag question? Rio HTML 4 11-05-2004 08:11 AM
Difference between pure DOM and JAXP over DOM ?? Thorsten Meininger XML 0 07-28-2004 08:51 AM
Difference between pure DOM and JAXP over DOM ?? Thorsten Meininger Java 0 07-28-2004 08:51 AM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57