Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

populating html table with jscript array? 1

Status
Not open for further replies.

sempuritoza

Programmer
Jul 16, 2003
12
0
0
ZA
i have a string which i have split and now i need to put the information into a html table, how can i go about doing this, does anyone know?
 
var str = &quot;<table cellpadding = \&quot;3\&quot; border = \&quot;0\&quot;>&quot;;

for(var i = 0; i < 10; i++){

str += &quot;<tr>&quot;;

for(var k = 0; k < 5; k++){

str += &quot;<td>&quot;+myArray[k]+&quot;</td>&quot;;

}

str += &quot;</tr>&quot;;

}

str += &quot;</table>&quot;;

document.open();
document.write(str);
document.close();


Something along those lines should do.

 
Certainly the above will work if the string is known at the time of table creation.

If the string isn't known until after the page is drawn, however, a trick I like to employ is to put anchors in the cells of the table and then fill the innerHTML of the anchors when I know the values I want to insert.

Here's a row of a sample table:

<TR>
<TD><A NAME=CELL1_1></A></TD>
<TD><A NAME=CELL1_2></A></TD>
<TD><A NAME=CELL1_3></A></TD>
</TR>

Now, when the string becomes known to and split by javascript, assuming you know where you want the information to go, you can use the following javascript commands:

CELL1_1.innerHTML = myArray[k]; //for example

A peculiarity this leads to, however, is that if someone does a View-Source on the page, they will see only empty anchors in the table.

If your cells will always be filled in the same order, you can play around with this trick:

name all the anchors the same thing, then put an onLoad in your BODY tag to call function &quot;collectAnchors()&quot; as such:

var anchors;
function collectAnchors()
{
anchors = document.getElementsByName('ANCHOR');
/*in this case, all anchors of interest have the NAME attribute set equal to 'ANCHOR'*/
}

Now, after your string is split into an array, you can use the following JavaScript:

for(i=0; i<myArray.length; i++)
anchors.innerHTML = myArray;

'hope this helps.

--Dave
 
getElemantByTagName('td').innerHTML =

I'm not too sure how it goes from there but if you do a search you should get some more.
 
well io just wanna thank both of you guys for the help, i ended up learning two very useful things here and i have an idea of what i'm gonna have to do now.

if i get stuck again i will definately know where to come
lata
E
 
I hadn't seen the getElementByTagName('td') command before. That's very cool!

With the anchors, you can pick and choose which table cells you want to have loaded (by only putting anchors in the cells-of-interest), but if you're loading the whole table, then skip the anchors and use scriptOhead's method! Mucho less clutter!

Have fun!

--Dave
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top