【HTML+CSS+JavaScript】九九乘法表

需求：九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        body {
            color: #333;
        }
        table {
            width: 900px;
            table-layout: fixed;
            /*border-collapse: collapse;*/
            empty-cells: hide;
        }
        td {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>九九乘法表</h1>
    <hr>


    <script>
        //JavaScript生成九九乘法表
        document.write('<table>');

        //循环 输出tr 行
        for (var i = 1; i <= 9; i ++) {
            document.write('<tr>');

            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }

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

        document.write('<br><br><br>');

        document.write('<table>');

        //循环 输出tr 行
        for (var i = 9; i >= 1; i --) {
            document.write('<tr>');

            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }

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



        document.write('<br><br><br>');

        document.write('<table>');

        //循环 输出tr 行
        for (var i = 1; i <= 9; i ++) {
            document.write('<tr>');
            //输出空的单元格
            for (var m = 1; m <= (9-i); m ++) {
                document.write('<td></td>');
            }
            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }

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




        document.write('<br><br><br>');

        document.write('<table>');

        //循环 输出tr 行
        for (var i = 9; i >= 1; i --) {
            document.write('<tr>');
            //输出空的单元格
            for (var m = 1; m <= (9-i); m ++) {
                document.write('<td></td>');
            }
            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }

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

    </script>


</body>
</html>
【HTML+CSS+JavaScript】九九乘法表

猜你喜欢
