homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Creating a Table in Javascript
looping, nests, table, javascript
ResultantVector




msg:3614379
 9:16 pm on Mar 29, 2008 (gmt 0)


This script will build a times table row by row.
You can change the start and end numbers by changing the i setting
The j setting limits the number of rows

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

document.write('<center><table width="20" border="0">');

//loop for rows
for (j=1;j<=30;j++)
{

document.write('<tr>');
//loop for columns

for (i=1;i<=20;i++)
{

document.write('<td>' + i*j + '</td>');
}

document.write('</tr>');
}

document.write('</table></center>');

</script>

 

birdbrain




msg:3614766
 3:48 pm on Mar 30, 2008 (gmt 0)

Hi there ResultantVector,

and a warm welcome to these forums. ;)

The use of document.write() is not really ideal. :(

Also note that the center element and the language="javascript" attribute are deprecated.

Here is a DOM method, that may be of interest...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>create DOM table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#newtable{
border:2px solid #999;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
margin:auto;
}
#newtable td{
width:50px;
line-height:50px;
border:1px solid #000;
text-align:center;
}
</style>

<script type="text/javascript">

window.onload=function() {
makeTable();
}

function makeTable() {

row=new Array();
cell=new Array();

row_num=12; //edit this value to suit
cell_num=12; //edit this value to suit

tab=document.createElement('table');
tab.setAttribute('id','newtable');

tbo=document.createElement('tbody');

for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');

for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode((c+1)*(k+1))
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}
</script>

</head>
<body>

<div id="mytable"></div>

</body>
</html>


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved