By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,183 Members | 1,112 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,183 IT Pros & Developers. It's quick & easy.

Speed Up document.getElementById()?

P: n/a
Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?

Apr 30 '07 #1
Share this Question
Share on Google+
19 Replies


P: n/a
Have you tried creating a javascript array of all of the cells as you
create (or after you create: depending if they're dynamically created
or not) the document elements? Then you can just reference the array's
mapped ID instead of IE finding the document element every time. I
don't know for sure if this would be faster, but it seems it would be.
(slightly longer start-up, but faster once everything is loaded)

For example, at the beginning:

var arr = new Array(500);
for (x in arr)
{
arr[x] = document.getElementById('cell' + x);
}

Then, throughout the rest of your document, simply use "arr[ID]" to
point to the document element you are wanting to manipulate.

On Apr 30, 9:36 am, vunet...@gmail.com wrote:
Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?
Apr 30 '07 #2

P: n/a
On Apr 30, 10:15 am, Derek <derek.detwei...@gmail.comwrote:
Have you tried creating a javascript array of all of the cells as you
create (or after you create: depending if they're dynamically created
or not) the document elements? Then you can just reference the array's
mapped ID instead of IE finding the document element every time. I
don't know for sure if this would be faster, but it seems it would be.
(slightly longer start-up, but faster once everything is loaded)

For example, at the beginning:

var arr = new Array(500);
for (x in arr)
{
arr[x] = document.getElementById('cell' + x);

}

Then, throughout the rest of your document, simply use "arr[ID]" to
point to the document element you are wanting to manipulate.

On Apr 30, 9:36 am, vunet...@gmail.com wrote:
Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?
I will test your solution and post the results, thank you.

Apr 30 '07 #3

P: n/a
On Apr 30, 10:15 am, Derek <derek.detwei...@gmail.comwrote:
Have you tried creating a javascript array of all of the cells as you
create (or after you create: depending if they're dynamically created
or not) the document elements? Then you can just reference the array's
mapped ID instead of IE finding the document element every time. I
don't know for sure if this would be faster, but it seems it would be.
(slightly longer start-up, but faster once everything is loaded)

For example, at the beginning:

var arr = new Array(500);
for (x in arr)
{
arr[x] = document.getElementById('cell' + x);

}

Then, throughout the rest of your document, simply use "arr[ID]" to
point to the document element you are wanting to manipulate.

On Apr 30, 9:36 am, vunet...@gmail.com wrote:
Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?
It is a significant improvement when updating cells' content but I
lose time when building this array. My cells are drawn dynamically.
So, until I draw the whole table, I cannot create a reference array.
However, when having this array, I repaint cell content much faster
(by 80%) than if using document.getElementById().
Thank you.
PS: any suggestions for speed improvements to create a reference
array? :)

Apr 30 '07 #4

P: n/a
If you are dynamically creating the cell elements, you can create the
array at the same time you are creating the elements, instead of doing
them all at once using the "for loop" and document.getElementById.
Depending on how you are setting the ID's, it may be tricky at first,
but you should be able to do something along the lines of:

var arr = new Array(500);
var yourTableContainingCells =
document.getElementById("yourTablesID");

/*
* Automatically assign the reference when you dynamically create
the element as follows.
* Do this for each cell reference, whether it be inside a for loop
or in some other function
* you are currently using to construct your cells. Use "arr[x]"
anywhere after this code to
* point to the element having "cellx" as it's id. (ie. arr[4] is
equivalent to id="cell4")
*/
arr[thisElementsID] = document.createElement("div");
arr[thisElementsID].setAttribute("id", "cell" + thisElementsID);
yourTableContainingCells.insertBefore(arr[thisElementsID],null);
Hope this helps out! Let me know how things turn out.

On Apr 30, 11:39 am, vunet...@gmail.com wrote:
On Apr 30, 10:15 am, Derek <derek.detwei...@gmail.comwrote:
Have you tried creating a javascript array of all of the cells as you
create (or after you create: depending if they're dynamically created
or not) the document elements? Then you can just reference the array's
mapped ID instead of IE finding the document element every time. I
don't know for sure if this would be faster, but it seems it would be.
(slightly longer start-up, but faster once everything is loaded)
For example, at the beginning:
var arr = new Array(500);
for (x in arr)
{
arr[x] = document.getElementById('cell' + x);
}
Then, throughout the rest of your document, simply use "arr[ID]" to
point to the document element you are wanting to manipulate.
On Apr 30, 9:36 am, vunet...@gmail.com wrote:
Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?

It is a significant improvement when updating cells' content but I
lose time when building this array. My cells are drawn dynamically.
So, until I draw the whole table, I cannot create a reference array.
However, when having this array, I repaint cell content much faster
(by 80%) than if using document.getElementById().
Thank you.
PS: any suggestions for speed improvements to create a reference
array? :)

Apr 30 '07 #5

P: n/a
On Apr 30, 12:03 pm, Derek <derek.detwei...@gmail.comwrote:
If you are dynamically creating the cell elements, you can create the
array at the same time you are creating the elements, instead of doing
them all at once using the "for loop" and document.getElementById.
Depending on how you are setting the ID's, it may be tricky at first,
but you should be able to do something along the lines of:

var arr = new Array(500);
var yourTableContainingCells =
document.getElementById("yourTablesID");

/*
* Automatically assign the reference when you dynamically create
the element as follows.
* Do this for each cell reference, whether it be inside a for loop
or in some other function
* you are currently using to construct your cells. Use "arr[x]"
anywhere after this code to
* point to the element having "cellx" as it's id. (ie. arr[4] is
equivalent to id="cell4")
*/
arr[thisElementsID] = document.createElement("div");
arr[thisElementsID].setAttribute("id", "cell" + thisElementsID);
yourTableContainingCells.insertBefore(arr[thisElementsID],null);

Hope this helps out! Let me know how things turn out.

On Apr 30, 11:39 am, vunet...@gmail.com wrote:
On Apr 30, 10:15 am, Derek <derek.detwei...@gmail.comwrote:
Have you tried creating a javascript array of all of the cells as you
create (or after you create: depending if they're dynamically created
or not) the document elements? Then you can just reference the array's
mapped ID instead of IE finding the document element every time. I
don't know for sure if this would be faster, but it seems it would be.
(slightly longer start-up, but faster once everything is loaded)
For example, at the beginning:
var arr = new Array(500);
for (x in arr)
{
arr[x] = document.getElementById('cell' + x);
}
Then, throughout the rest of your document, simply use "arr[ID]" to
point to the document element you are wanting to manipulate.
On Apr 30, 9:36 am, vunet...@gmail.com wrote:
Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?
It is a significant improvement when updating cells' content but I
lose time when building this array. My cells are drawn dynamically.
So, until I draw the whole table, I cannot create a reference array.
However, when having this array, I repaint cell content much faster
(by 80%) than if using document.getElementById().
Thank you.
PS: any suggestions for speed improvements to create a reference
array? :)
This perfectly makes sense. However, my table is created differently,
as it is a much faster way (based on test cases) to draw big tables:

var arrTable = new Array();
arrTable.push("<table><tr><td>")
arrTable.push("qqq</td><td>")
arrTable.push("www</td><td>")
arrTable.push("</td></tr></table>")
document.getElementById("container").innerHTML=arr Table.join(' ');

which means I cannot get a reference until I draw the whole table,
unless I go back to DOM method of creating a table as you mentioned
above.

Apr 30 '07 #6

P: n/a
In comp.lang.javascript message <11**********************@o5g2000hsb.goo
glegroups.com>, Mon, 30 Apr 2007 06:36:30, vu******@gmail.com posted:
>Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?
Especially, but not only, if you are painting the cells in non-random
order, ISTM that you should be reaching the cells by using the structure
of the table that holds them. Get a link to the base of the data in the
table, and index relatively to that.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/- FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "" (SonOfRFC1036)
Apr 30 '07 #7

P: n/a
On May 1, 12:34 am, vunet...@gmail.com wrote:
On Apr 30, 12:03 pm, Derek <derek.detwei...@gmail.comwrote:


If you are dynamically creating the cell elements, you can create the
array at the same time you are creating the elements, instead of doing
them all at once using the "for loop" and document.getElementById.
Depending on how you are setting the ID's, it may be tricky at first,
but you should be able to do something along the lines of:
var arr = new Array(500);
var yourTableContainingCells =
document.getElementById("yourTablesID");
/*
* Automatically assign the reference when you dynamically create
the element as follows.
* Do this for each cell reference, whether it be inside a for loop
or in some other function
* you are currently using to construct your cells. Use "arr[x]"
anywhere after this code to
* point to the element having "cellx" as it's id. (ie. arr[4] is
equivalent to id="cell4")
*/
arr[thisElementsID] = document.createElement("div");
arr[thisElementsID].setAttribute("id", "cell" + thisElementsID);
yourTableContainingCells.insertBefore(arr[thisElementsID],null);
Hope this helps out! Let me know how things turn out.
On Apr 30, 11:39 am, vunet...@gmail.com wrote:
On Apr 30, 10:15 am, Derek <derek.detwei...@gmail.comwrote:
Have you tried creating a javascript array of all of the cells as you
create (or after you create: depending if they're dynamically created
or not) the document elements? Then you can just reference the array's
mapped ID instead of IE finding the document element every time. I
don't know for sure if this would be faster, but it seems it would be.
(slightly longer start-up, but faster once everything is loaded)
For example, at the beginning:
var arr = new Array(500);
for (x in arr)
{
arr[x] = document.getElementById('cell' + x);
}
Then, throughout the rest of your document, simply use "arr[ID]" to
point to the document element you are wanting to manipulate.
On Apr 30, 9:36 am, vunet...@gmail.com wrote:
Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?
It is a significant improvement when updating cells' content but I
lose time when building this array. My cells are drawn dynamically.
So, until I draw the whole table, I cannot create a reference array.
However, when having this array, I repaint cell content much faster
(by 80%) than if using document.getElementById().
Thank you.
PS: any suggestions for speed improvements to create a reference
array? :)

This perfectly makes sense. However, my table is created differently,
as it is a much faster way (based on test cases) to draw big tables:

var arrTable = new Array();
arrTable.push("<table><tr><td>")
arrTable.push("qqq</td><td>")
arrTable.push("www</td><td>")
arrTable.push("</td></tr></table>")
document.getElementById("container").innerHTML=arr Table.join(' ');

which means I cannot get a reference until I draw the whole table,
unless I go back to DOM method of creating a table as you mentioned
above.- Hide quoted text -

- Show quoted text -
this code is pretty inefficient...

is there a reason why you couldn't just do
document.getElementById("container").innerHTML="<t able><tr><td>qqq</
td><td>www</td><td>("</td></tr></table>";
this will give a huge performance gain by eliminating array
operations.

why don't you post more code so we can help optimise.

May 1 '07 #8

P: n/a
Pete wrote:
On May 1, 12:34 am, vunet...@gmail.com wrote:
>On Apr 30, 12:03 pm, Derek <derek.detwei...@gmail.comwrote:


>>If you are dynamically creating the cell elements, you can create the
array at the same time you are creating the elements, instead of doing
them all at once using the "for loop" and document.getElementById.
Depending on how you are setting the ID's, it may be tricky at first,
but you should be able to do something along the lines of:
var arr = new Array(500);
var yourTableContainingCells =
document.getElementById("yourTablesID");
/*
* Automatically assign the reference when you dynamically create
the element as follows.
* Do this for each cell reference, whether it be inside a for loop
or in some other function
* you are currently using to construct your cells. Use "arr[x]"
anywhere after this code to
* point to the element having "cellx" as it's id. (ie. arr[4] is
equivalent to id="cell4")
*/
arr[thisElementsID] = document.createElement("div");
arr[thisElementsID].setAttribute("id", "cell" + thisElementsID);
yourTableContainingCells.insertBefore(arr[thisElementsID],null);
Hope this helps out! Let me know how things turn out.
On Apr 30, 11:39 am, vunet...@gmail.com wrote:
On Apr 30, 10:15 am, Derek <derek.detwei...@gmail.comwrote:
Have you tried creating a javascript array of all of the cells as you
create (or after you create: depending if they're dynamically created
or not) the document elements? Then you can just reference the array's
mapped ID instead of IE finding the document element every time. I
don't know for sure if this would be faster, but it seems it would be.
(slightly longer start-up, but faster once everything is loaded)
For example, at the beginning:
var arr = new Array(500);
for (x in arr)
{
arr[x] = document.getElementById('cell' + x);
}
Then, throughout the rest of your document, simply use "arr[ID]" to
point to the document element you are wanting to manipulate.
On Apr 30, 9:36 am, vunet...@gmail.com wrote:
>Hello,
>My AJAX application paints data into about 500 cells with unique ID
>every 10 seconds. I am using document.getElementById() to find the
>right cell. However, I have noticed that document.getElementById() in
>IE is freezing the browser for about 1 second unlike Firefox.
>Can anyone suggest any speed improvements for painting data into a
>large number of cells to speed up the process?
It is a significant improvement when updating cells' content but I
lose time when building this array. My cells are drawn dynamically.
So, until I draw the whole table, I cannot create a reference array.
However, when having this array, I repaint cell content much faster
(by 80%) than if using document.getElementById().
Thank you.
PS: any suggestions for speed improvements to create a reference
array? :)
This perfectly makes sense. However, my table is created differently,
as it is a much faster way (based on test cases) to draw big tables:

var arrTable = new Array();
arrTable.push("<table><tr><td>")
arrTable.push("qqq</td><td>")
arrTable.push("www</td><td>")
arrTable.push("</td></tr></table>")
document.getElementById("container").innerHTML=ar rTable.join(' ');

which means I cannot get a reference until I draw the whole table,
unless I go back to DOM method of creating a table as you mentioned
above.- Hide quoted text -

- Show quoted text -

this code is pretty inefficient...

is there a reason why you couldn't just do
document.getElementById("container").innerHTML="<t able><tr><td>qqq</
td><td>www</td><td>("</td></tr></table>";
this will give a huge performance gain by eliminating array
operations.

why don't you post more code so we can help optimise.
I'd like to see proof of innerHTML being faster than array operations.
I personally don't believe it.

Especially in the case of generating a huge dynamic table.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
May 1 '07 #9

P: n/a
I'd like to see proof of innerHTML being faster than array operations.
I personally don't believe it.

Especially in the case of generating a huge dynamic table.
..var arrTable = new Array();
arrTable.push("<table><tr><td>")
arrTable.push("qqq</td><td>")
arrTable.push("www</td><td>")
arrTable.push("</td></tr></table>")
document.getElementById("container").innerHTML=arr Table.join(' ');

has become
document.getElementById("container").innerHTML="<t able><tr><td>qqq</
td><td>www</td><td>("</td></tr></table>";
You don't see how the new code is faster? I just did a speed test and
the new code is 7 times faster.


May 1 '07 #10

P: n/a
On May 1, 1:47 pm, Pete <peter.gal...@gmail.comwrote:
I'd like to see proof of innerHTML being faster than array operations.
I personally don't believe it.
Especially in the case of generating a huge dynamic table.

.var arrTable = new Array();
arrTable.push("<table><tr><td>")
arrTable.push("qqq</td><td>")
arrTable.push("www</td><td>")
arrTable.push("</td></tr></table>")
document.getElementById("container").innerHTML=arr Table.join(' ');

has become

document.getElementById("container").innerHTML="<t able><tr><td>qqq</
td><td>www</td><td>("</td></tr></table>";

You don't see how the new code is faster? I just did a speed test and
the new code is 7 times faster.
By the way, arr.push is much slower than accessing the array directly.

May 1 '07 #11

P: n/a
Pete wrote:
On May 1, 1:47 pm, Pete <peter.gal...@gmail.comwrote:
>>I'd like to see proof of innerHTML being faster than array operations.
I personally don't believe it.
Especially in the case of generating a huge dynamic table.
.var arrTable = new Array();
arrTable.push("<table><tr><td>")
arrTable.push("qqq</td><td>")
arrTable.push("www</td><td>")
arrTable.push("</td></tr></table>")
document.getElementById("container").innerHTML=ar rTable.join(' ');

has become

document.getElementById("container").innerHTML="< table><tr><td>qqq</
td><td>www</td><td>("</td></tr></table>";

You don't see how the new code is faster? I just did a speed test and
the new code is 7 times faster.
Nope, sure don't.

By what means do you validate that?

Also, I think you missed "Especially in the case of generating a huge
dynamic table."
By the way, arr.push is much slower than accessing the array directly.
By what means do you validate that claim?

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
May 1 '07 #12

P: n/a
By what means do you validate that claim?
here is a timer object

function Timer() {
this.times = [];

this.record = function() {
this.times.push(new Date().getTime());
};

this.ticks = function() {
return (this.times.length 1 ? this.times.pop() -
this.times.pop() : 0);
};
};

call timer.record() to start the timer and then call it again to end
the timer.
then call timer.ticks() to get the time elapsed.

Wrap your code in a for loop and run it a few thousand times. do this
for code snippet 1 and then for code snippet 2. Pretty handy when
looking at code efficiency, or inefficiency in this case.
May 1 '07 #13

P: n/a
is there a reason why you couldn't just do
document.getElementById("container").innerHTML="<t able><tr><td>qqq</
td><td>www</td><td>("</td></tr></table>";
The table is much bigger than just that: imagine 50 rows and 10
columns...
May 1 '07 #14

P: n/a
On May 1, 12:39 am, -Lost <maventheextrawo...@techie.comwrote:
Pete wrote:
On May 1, 12:34 am, vunet...@gmail.com wrote:
On Apr 30, 12:03 pm, Derek <derek.detwei...@gmail.comwrote:
>If you are dynamically creating the cell elements, you can create the
array at the same time you are creating the elements, instead of doing
them all at once using the "for loop" and document.getElementById.
Depending on how you are setting the ID's, it may be tricky at first,
but you should be able to do something along the lines of:
var arr = new Array(500);
var yourTableContainingCells =
document.getElementById("yourTablesID");
/*
* Automatically assign the reference when you dynamically create
the element as follows.
* Do this for each cell reference, whether it be inside a for loop
or in some other function
* you are currently using to construct your cells. Use "arr[x]"
anywhere after this code to
* point to the element having "cellx" as it's id. (ie. arr[4] is
equivalent to id="cell4")
*/
arr[thisElementsID] = document.createElement("div");
arr[thisElementsID].setAttribute("id", "cell" + thisElementsID);
yourTableContainingCells.insertBefore(arr[thisElementsID],null);
Hope this helps out! Let me know how things turn out.
On Apr 30, 11:39 am, vunet...@gmail.com wrote:
On Apr 30, 10:15 am, Derek <derek.detwei...@gmail.comwrote:
Have you tried creating a javascript array of all of the cells as you
create (or after you create: depending if they're dynamically created
or not) the document elements? Then you can just reference the array's
mapped ID instead of IE finding the document element every time. I
don't know for sure if this would be faster, but it seems it would be.
(slightly longer start-up, but faster once everything is loaded)
For example, at the beginning:
var arr = new Array(500);
for (x in arr)
{
arr[x] = document.getElementById('cell' + x);
}
Then, throughout the rest of your document, simply use "arr[ID]" to
point to the document element you are wanting to manipulate.
On Apr 30, 9:36 am, vunet...@gmail.com wrote:
Hello,
My AJAX application paints data into about 500 cells with unique ID
every 10 seconds. I am using document.getElementById() to find the
right cell. However, I have noticed that document.getElementById() in
IE is freezing the browser for about 1 second unlike Firefox.
Can anyone suggest any speed improvements for painting data into a
large number of cells to speed up the process?
It is a significant improvement when updating cells' content but I
lose time when building this array. My cells are drawn dynamically.
So, until I draw the whole table, I cannot create a reference array.
However, when having this array, I repaint cell content much faster
(by 80%) than if using document.getElementById().
Thank you.
PS: any suggestions for speed improvements to create a reference
array? :)
This perfectly makes sense. However, my table is created differently,
as it is a much faster way (based on test cases) to draw big tables:
var arrTable = new Array();
arrTable.push("<table><tr><td>")
arrTable.push("qqq</td><td>")
arrTable.push("www</td><td>")
arrTable.push("</td></tr></table>")
document.getElementById("container").innerHTML=arr Table.join(' ');
which means I cannot get a reference until I draw the whole table,
unless I go back to DOM method of creating a table as you mentioned
above.- Hide quoted text -
- Show quoted text -
this code is pretty inefficient...
is there a reason why you couldn't just do
document.getElementById("container").innerHTML="<t able><tr><td>qqq</
td><td>www</td><td>("</td></tr></table>";
this will give a huge performance gain by eliminating array
operations.
why don't you post more code so we can help optimise.

I'd like to see proof of innerHTML being faster than array operations.
I personally don't believe it.

Especially in the case of generating a huge dynamic table.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
I found some test cases in some books and online, plus tested myself.

May 1 '07 #15

P: n/a
This might be a pretty quick way to do it. Note in firefox you need to
eliminate whitespace between tags when coding your table for this code
sample to work.

<body>

<table border="1" id="t"><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</
td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></
tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></
tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table>

<script>
var arr=new Array([1,2,3], [4,5,6], [7,8,9], [10,11,12]);

var rows = document.getElementById('t').childNodes[0].childNodes;
var cols;

for (var i=0; i<rows.length; ++i) {
cols = rows[i].childNodes;
for (var j=0 ; j<cols.length; ++j) {
cols[j].innerHTML = arr[i][j];
}
}
</script>
</body>

May 2 '07 #16

P: n/a
On May 2, 3:20 pm, Pete <peter.gal...@gmail.comwrote:
This might be a pretty quick way to do it.
To do what? Please quote what you are replying to (and trim what you
aren't).
Note in firefox you need to
eliminate whitespace between tags when coding your table for this code
sample to work.
Or if you use more appropriate references you needn't worry about
that.
>
<body>

<table border="1" id="t"><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</
td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></
tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></
tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table>

<script>
var arr=new Array([1,2,3], [4,5,6], [7,8,9], [10,11,12]);
It seems easier to just use an array literal:

var arr = [[1,2,3], [4,5,6], [7,8,9], [10,11,12]];

But since it is simply a sequential allocation, there doesn't seem any
point to the internal arrays, you could just as easily use:

var arr = [1,2,3,4,5,6,7,8,9,10,11,12];

var rows = document.getElementById('t').childNodes[0].childNodes;
Presumably rows will be a reference to the table's rows. Why not use
the table's rows collection and not worry about whether the DOM
contains #text nodes or not?

var rows = document.getElementById('t').rows;
var cols;
That might be better as:

var cells;
var count = 0;
>
for (var i=0; i<rows.length; ++i) {
cols = rows[i].childNodes;
And use the row's cells collection (removing the influence of possible
text nodes):

cells = rows[i].cells;
for (var j=0 ; j<cols.length; ++j) {
cols[j].innerHTML = arr[i][j];
cells[j].innerHTML = arr[count++];

Though it might be nice to keep the 2d array as it more closely models
the table. Just offering an alternative.
--
Rob

May 2 '07 #17

P: n/a
>Presumably rows will be a reference to the table's rows. Why not use
>the table's rows collection and not worry about whether the DOM
contains #text nodes or not?
Can you show code for this?

Thanks.

May 2 '07 #18

P: n/a
On May 2, 6:39 pm, Pete <peter.gal...@gmail.comwrote:
Presumably rows will be a reference to the table's rows. Why not use
the table's rows collection and not worry about whether the DOM
contains #text nodes or not?

Can you show code for this?
Have a look at what you trimmed.

--
Rob

May 2 '07 #19

P: n/a
On May 2, 4:45 pm, RobG <r...@iinet.net.auwrote:
On May 2, 6:39 pm, Pete <peter.gal...@gmail.comwrote:
>Presumably rows will be a reference to the table's rows. Why not use
>the table's rows collection and not worry about whether the DOM
>contains #text nodes or not?
Can you show code for this?

Have a look at what you trimmed.

--
Rob
Yeah I noticed it soon after I posted. The .rows array will come in
handy.

Cheers,

May 3 '07 #20

This discussion thread is closed

Replies have been disabled for this discussion.