...

View Full Version : creating a table and need a bit of help



melCarmasin
05-04-2007, 06:10 AM
Hello everyone:) This looks like a great forum.
I created a javascript 13 by 13 table that can have a string or numbers in the cells. What I want to do with it is make it a 1-12 multiplication table but I'm not exactly sure how to add the multiplication into the loops for the numbers to display properly in the cells. Can any1 help me out? Here's my code for the table with just "*" in the cells.

var maxRows = 13;
var maxColumns = 13;
var tbl = '<table border="1">';

for (var rows = 0; rows < maxRows; rows++)
{
tbl += '<tr>';
for (var columns = 0; columns < maxColumns; columns++)
{
tbl += '<td>*</td>';
}
tbl += '</tr>';
}
tbl += '</table>';
document.write(tbl);

venkatmallu.net
05-04-2007, 09:34 AM
hi,
i made some changes in ur code...
i think u can understand the changes where i did...

<script language="JavaScript">
var maxRows = 13;
var maxColumns = 13;
var tbl = "<table border='1'>";
for (var rows = 0; rows < maxRows; rows++)
{
tbl += "<tr>";
for (var columns = 0; columns < maxColumns; columns++)
{
if(rows*columns==0)
tbl += "<td>"+1+"</td>";
else
tbl += "<td>"+rows*columns+"</td>";
}
tbl += "</tr>";
}
tbl += "</table>";
document.write(tbl);
</script>

if u have any doubts tell me..

melCarmasin
05-05-2007, 01:07 AM
This looks pretty much perfect. I can pretty much figure out whats going on in the code you added, except the top row and first colomn are all 1's, any idea of how to get those out of there?

rwedge
05-05-2007, 01:22 AM
This will make a 12 by 12


<html>
<head>
<title>Multiplication table, nested loop</title>
<script type="text/javascript">
function mkTb() {
a = '';
j = 1;
myHTML='<table border="1" bordercolor="#333366" cellpadding="5" cellspacing="0">';
for (i=1;i<13;i++) {
myHTML+='<tr>';
k=1;
while (k<13) {
a=(j*k);
myHTML+='<td width="20">'+a+'</td>';
if ((k%12) == 0) myHTML+='</tr>';
k=k+1;
}
j++;
}
myHTML+='</table>';
document.getElementById('rlts').innerHTML=myHTML;
}
</script>
</head>

<body>

<div id="rlts""> <a href="javascript:void(0)" onClick="mkTb()">Make Table</a> </div><br>

</body>
</html>

venkatmallu.net
05-05-2007, 07:50 AM
for (var columns = 0; columns < maxColumns; columns++)
{
if(rows*columns==0)
tbl += "<td>"+1+"</td>";
else
tbl += "<td>"+rows*columns+"</td>";
}


check this inner for loop...
what i made to get 1's in first row and first column is
i'm checking in if condition that (rows*columns==0)..
-->it wil be true of 1st row r 1st column.... then i'm displaying 1's
-->if the condition false (ie., rows and columns are not 1st) then i'm displaying the result of (rows*columns)..

i think u got it now

coothead
05-05-2007, 12:31 PM
Hi there melCarmasin,

here is another variation, using the DOM...

<!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>
coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum