Creating a Table in Javascript

Forum Moderators: open

Message Too Old, No Replies

Creating a Table in Javascript

looping, nests, table, javascript

ResultantVector

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

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

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