HTML与JavaScript实现乘法表的各种布局-CSDN博客

本文链接：https://blog.csdn.net/TTWendyTT/article/details/119937580

1. 左下角

while循环：

        document.write('<table>');
        var i = 1;
        while (i <= 9) {
            document.write('<tr>');
            var j = 1;
            while (j <= i) {
                document.write('<td>');
                document.write(j + '×' + i + '=' + j * i);
                document.write('</td>');
                j++;
            }
            document.write('</tr>');
            i++;
        }
        document.write('</table>');

for循环：

        // --思路--9X9乘法表:行数=列数，每个单元格×号左边与列数相同，×号右边与行数相同，i和j都是从小到大
        document.write('<table>');
        for (var i = 1; i <= 9; i++) {
            document.write('<tr>');
            for (var j = 1; j <= i; j++) {
                document.write('<td>');
                document.write(j + '×' + i + '=' + j * i);
                document.write('</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');

2. 左上角

        document.write('<table>');
        var i = 9;
        while (i >= 1) {
            document.write('<tr>');
            var j = 1;
            while (j <= i) {
                document.write('<td>');
                document.write(j + '×' + i + '=' + j * i);
                document.write('</td>');
                j++;
            }
            document.write('</tr>');
            i--;
        }
        document.write('</table>');

for循环：

        //--思路--倒着的9X9乘法表：i从大到小，i初始值等于总行数，i--, j从小到大，j <= i，即可实现每行列数j不断减少，单元格里的内容不变
        document.write('<table>');
        for (var i = 9; i >= 1; i--) {
            document.write('<tr>');
            for (var j = 1; j <= i; j++) {
                document.write('<td>');
                document.write(j + '×' + i + '=' + j * i);
                document.write('</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');

3. 右下角

        document.write('<table>');
        var i = 1;
        while (i <= 9) {
            document.write('<tr>');
            var j = 1;
            //  空白单元格
            while (j <= 9 - i) {
                document.write('<td></td>');
                j++;
            }
            j = 1;
            //  包含内容的右边的单元格
            while (j <= i) {
                document.write('<td>');
                document.write(j + '×' + i + '=' + j * i);
                document.write('</td>');
                j++;
            }
            document.write('</tr>');
            i++;
        }
        document.write('</table>');

for循环：

        document.write('<table>');
        for (var i = 1; i <= 9; i++) {
            document.write('<tr>');
            for (var j = 1; j <= 9 - i; j++) {
                document.write('<td></td>');
            }
            for (var j = 1; j <= i; j++) {
                document.write('<td>');
                document.write(j + '×' + i + '=' + j * i);
                document.write('</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');

4. 右上角

        document.write('<table>');
        var i = 9;
        while (i >= 1) {
            document.write('<tr>');
            var j = 1;
            while (j <= 9 - i) {
                document.write('<td></td>');
                j++;
            }
            j = 1;
            while (j <= i) {
                document.write('<td>');
                document.write(j + '×' + i + '=' + j * i);
                document.write('</td>');
                j++;
            }
            document.write('</tr>');
            i--;
        }
        document.write('</table>');

for循环：

        document.write('<table>');
        for (var i = 9; i >= 1; i--) {
            document.write('<tr>');
            for (var j = 1; j <= 9 - i; j++) {
                document.write('<td></td>');
            }
            for (var j = 1; j <= i; j++) {
                document.write('<td>');
                document.write(j + '×' + i + '=' + j * i);
                document.write('</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');