zoukankan html css js c++ java

【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>

查看全文

相关阅读:
自解代理模式
 顺时针打印二维方阵
 Dom4j官网解释实例
 Eclipse快捷键大全
 MyEclipse快捷键大全
 SQL语句的增删改查（详细）
MySQL用户权限详细汇总
 从表中随机返回n条记录
 证件照（1寸2寸）拍摄处理知识汇总
 java 实现文件内容的加密和解密

原文地址：https://www.cnblogs.com/neymargoal/p/9470986.html