JavaScript——实现九九乘法表

这是一张99乘法表，我们需要用JavaScript来实现这个99乘法表

基础实现

在观察表后，可以发现每一个表达式都可以用 a*b=c 来表示出来，而c可以借用算术计算出来，所以我们只需要用到两个变量

var i,j;

我们可以将每个表达式理解为列数×行数，如2×5则为第二列×第五行
观察可得，行数最多为9行，列数最多也为9列
通过两个循环嵌套可以写出一个基础的乘法表
代码

var i; //定义行数
var j; //定义列数
for (i = 1;i <= 9;i++){ //循环9行
    for(j = 1;j <= 9;j++){ //循环9列
        //输出“列*行=结果”
        document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br/>"); // 一行输出完毕后换行
}

结果显示为

99乘法表可以满足，但是多出了许多重复的内容
再次观察99乘法表可以发现，每一行最大的列数等于他所在的行数，第一行有一列，第二行有二列，第三行有三列……所以在for循环中，循环列数时，最大值应等于行数，即列数小于等于行数时进行循环，优化后代码为

var i; //定义行数
var j; //定义列数
for (i = 1;i <= 9;i++){ //循环9行
    for(j = 1;j <= i;j++){ //循环9列 j <= i时循环
        //输出“列*行=结果”
        document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br/>"); // 一行输出完毕后换行
}

显示结果为

添加格式

接下来要为99乘法表添加显示效果，使得显示效果与图片相同
我们可以使用< table >< /table >标签将整个循环定义为一个表格

var i; //定义行数
var j; //定义列数
document.write("<table align='center' cellspacing='0'>"); //使用table标签包裹住循环体

for (i = 1;i <= 9;i++){ //循环9行
    for(j = 1;j <= i;j++){ //循环9列 j <= i时循环
        //输出“列*行=结果”
        document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br/>"); // 一行输出完毕后换行
}

document.write("</table>");

使用tr标签包裹住每一行的输出

var i; //定义行数
var j; //定义列数
document.write("<table align='center' cellspacing='0'>"); //使用table标签包裹住循环体

for (i = 1;i <= 9;i++){ //循环9行

    document.write("<tr>") //使用tr包裹住一行
    for(j = 1;j <= i;j++){ //循环9列 j <= i时循环
        //输出“列*行=结果”
        document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
    }
    document.write("</tr>");
}

document.write("</table>");

使用td标签定义每一个表达式的显示

var i; //定义行数
var j; //定义列数
document.write("<table align='center' cellspacing='0'>"); //使用table标签包裹住循环体

for (i = 1;i <= 9;i++){ //循环9行

    document.write("<tr>") //使用tr包裹住一行
    for(j = 1;j <= i;j++){ //循环9列 j <= i时循环
        
        document.write("<td>");
        
        //输出“列*行=结果”
        document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");

        document.write("</td>");
    }
    document.write("</tr>");
}

document.write("</table>");

使用css给每个td添加一个边框

td{
	border: black solid 1px;
}

显示效果