JS实现九九乘法表

给贝贝赚口粮

于 2022-11-04 10:53:27 发布

阅读量88

点赞数

分类专栏：前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_42178670/article/details/127680742

版权

前端专栏收录该内容

93 篇文章 0 订阅

订阅专栏

JS实现九九乘法表

正常格式乘法表，直接上代码

 table {
    border: none;
}
td {
    border: 1px solid #666;
    padding: 5px 10px;
}

document.write('<table>')
for(let row=1; row<=9; row++) {
    document.write('<tr>')
    for(let column=1; column<=row; column++) {
        document.write('<td>' + column + 'x' + row + '=' + column * row + '</td>')
    }
    document.write('</tr>')
}
document.write('</table>')

结果：
在这里插入图片描述
靠右边的乘法表，代码如下：

document.write('<table>');
for(let row=1; row<=9; row++){
	document.write('<tr>');
	for(let blank=1; blank<=9-row; blank++) {  // 画空单元格
		document.write('<td style="border: none"></td>');
	}
	for(let column=row; column>0; column--) {
		document.write('<td>' + column + 'x' + row + '=' + column * row + '</td>')
	}
	document.write('</tr>');
}
document.write('</table>');

结果：
在这里插入图片描述
靠顶部的乘法表 代码如下：

document.write('<table>');
    for(let row=9; row>0; row--) {
    document.write('<tr>');
            for(let column=1; column<=row; column++) {
                document.write('<td>' + column + 'x' + row + '=' + column * row + '</td>')
            }
        document.write('</tr>');
    }
document.write('</table>');

结果如下：
在这里插入图片描述
右侧顶部乘法表，代码如下：

document.write('<table>');
    for(let row=9; row>0; row--) {
        document.write('<tr>');
            for(let blank=1; blank<=9-row; blank++) { // 画空单元格
                document.write('<td style="border: none"></td>');
            }

            for(let column=row; column>0; column--) {
                document.write('<td>' + column + 'x' + row + '=' + column * row + '</td>')
            }
        document.write('</tr>');
    }
document.write('</table>');