I need to create a multiplcation table using Javascript

Discussion in 'HTML & Website Design' started by sorrynoid4me, Aug 7, 2011.

  1. #1
    The multiplication table just needs to be going up to 10, and it should involve CSS.

    Can someone post some links or hints so that I can get started on this assignment for Lab CS120 Lab 7b.

    Thank you.
     
    sorrynoid4me, Aug 7, 2011 IP
  2. dthoai

    dthoai Member

    Messages:
    106
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    38
    #2
    You can try following code:

    
    <html>
    <body>
    <div id="cover">
    </div>
    <script>
    function addTable(container, level) {
     if (level > 10) return;
     var tb = document.createElement('table');
     var tr = document.createElement('tr');
     var td = document.createElement('td');
     container.appendChild(tb); tb.appendChild(tr);
     tr.appendChild(td);
     td.innerHTML = 'level ' + level;
     td.style.border = 'solid 1px red';
     tb.style.width = '100%';
     addTable(td, level + 1);
    }
    addTable(document.getElementById('cover'), 1);
    </script>
    </body>
    </html>
    
    Code (markup):
     
     
    dthoai, Aug 8, 2011 IP
  3. Thorlax402

    Thorlax402 Member

    Messages:
    194
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    40
    #3
    I think this is what you are looking for. Just change the renderTable(10) to renderTable(someOtherNumber) to change how big you want the table to be.

    
    <html>
    <head>
    <style type="text/css">
    table, td {
    	border: 1px solid #999999;
    }
    </style>
    
    <script type="text/javascript">
    function renderTable(highestDegree) {
    	document.write("<table cellspacing='0' cellpadding='5'><tr>");
    	var i = 1;
    	for (i = 1; i <= highestDegree; i++) {
    		var j = 1;
    		for (j = 1; j <= highestDegree; j++) {
    			document.write("<td>"+ (i * j) +"</td>");
    		}
    		document.write("</tr><tr>");
    	}
    	document.write("</tr></table>");
    }
    </script>
    </head>
    
    <body>
    <script type="text/javascript">renderTable(10);</script>
    </body>
    </html>
    
    HTML:
     
    Thorlax402, Aug 8, 2011 IP
  4. sorrynoid4me

    sorrynoid4me Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Great! Thanks a bunch!
     
    sorrynoid4me, Aug 8, 2011 IP