Create a Multiplication Table

A typical question asked in "History of JavaScript" classes where the teacher mistakenly believes they are teaching programming.


Create a multiplication table that displays the numbers one through twelve and the results that would be obtained by multiplying those numbers by one through twelve.

Now this question is a bit like the one asking to populate an array only more so in that the JavaScript solution to that earlier homework question can be used as a part of the solution to this question.

Historical Answer:

for (var i = 1; i <= 12; i++) document.write("<td>"+i+"</td>");
for (var j = 1; j <= 12; j++) {
for (var i = 1; i <= 12; i++) document.write("<td>"+(i*j)+"</td>");

History classes often use the obsolete document.write statement in the mistaken belief that it is the right way to generate content for the page. It used to be but inly in the days of Netscape 2 and 3 and Internet Explorer 3. Both Netscape 4 and IE4 introduced better ways and more modern browsers have adopted a standard document object model.

Now I have kept things simple with this historical answer by omitting whatever additional code that would get added to style the first row and column as headings for the rest of the table.

Note also that this code will only work if embedded directly and obtrusively in the page at the spot where the table is to appear because of the antiquated document.write calls.

JavaScript Answer:

Array.prototype.populate = function(n) {
return Object.keys(Object(0+Array(n)));
(function(sz) {
"use strict";
var tabl, row, ar;
ar = [].populate(sz+1).shift();
tabl = document.createElement('table');
row = tabl.tHead.insertRow(-1);
row.insertCell(0); row.cells[0].innerHTML = ' ';
ar.forEach(function(a) {row.insertCell(a); row.cells[a].innerHTML = a;});
ar.forEach(function(a,b) {
row = tabl.tBodies[0].insertRow(-1);
row.insertCell(0); row.cells[0].innerHTML = a;
row.cells[0].className = 'first';
ar.forEach(function(b) {row.insertCell(b); row.cells[b].innerHTML = b*a;});

This unobtrusive script can be attached to the bottom of the web page and will insert the table inside whichever tag in the page has id="mult". The solution also makes correct use of all the table tags including thead, th, and tbody to distinguish the heading row from the rest of the table. It also inserts a class into all the entries in the first row so that the entire table can be styled using CSS. We also make use of an array containing the numbers we wish to multiply and generate the table from the array without the need for any loops in our code.

While this code looks longer than the historical version, appearances are deceptive as most of the additional code is creating the data table tags missing from the historical version that provide both a more semantic definition and also make styling the table easier. The code is also reusable if we want to add multiple tables into the same page. We also only have one spot to change if we decided we wanted the table to include numbers up to 20 instead of 12.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow