Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    creating a table and need a bit of help

    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);

  • #2
    New Coder
    Join Date
    Apr 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    This will make a 12 by 12
    Code:
    <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>
    Last edited by rwedge; 05-05-2007 at 02:33 AM.

  • #5
    New Coder
    Join Date
    Apr 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there melCarmasin,

    here is another variation, using the DOM...
    Code:
    <!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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •