zoukankan      html  css  js  c++  java
  • JS在页面输出九九乘法表

    <!--小练习,练习使用循环实现一个九九乘法表
    第一步,最低要求:在Console中按行输出 n * m = t
    然后,尝试在网页中,使用table来实现一个九九乘法表
    -->

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                td {
                     200px;
                    height: 40px;
                    border: 1px solid #CCCCCC;
                }
                tr {
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <!--小练习,练习使用循环实现一个九九乘法表
                第一步,最低要求:在Console中按行输出 n * m = t
                然后,尝试在网页中,使用table来实现一个九九乘法表
            -->
            
            <table>
                <th>九九乘法表</th>
                
            </table>
            
            <script>
                
                for(var i=1;i<=9;i++){
                    var str="";
                    var arr=[];
                    var tr=document.createElement("tr");
                    for(var j=1;j<=i;j++){
                        str=i+"*"+j+"="+i*j;
                        arr.push(str);
    //                    console.log(arr);
                        var td=document.createElement("td");
                        tr.appendChild(td);
                        td.innerHTML=arr[j-1]; //注意这里是j-1 因为当i=1 j=1的时候 由于 arr[1]不存在  所以会报错
                        //console.log(str);把每次内部循环的结果也都输出了 第一行:3*1=3  第二行:3*1=3 3*2=6  第三行:3*1=3 3*2=6 3*3=9
                    }
    //                
    //                console.log(str); //将一次外循环作为一次输出
                    var table=document.getElementsByTagName("table")[0];
                    table.appendChild(tr);
                }
                        
            </script>
        </body>
    </html>

  • 相关阅读:
    <SpringMvc>入门二 常用注解
    <SpringMvc>入门一 HelloWorld
    <MyBatis>入门六 动态sql
    <MyBatis>入门五 查询的返回值处理
    <MyBatis>入门四 传入的参数处理
    <MyBatis>入门三 sqlMapper文件
    <MyBatis>入门二 全局配置文件
    <MyBatis>入门一 HelloWorld
    类和类的继承(6)
    python 的重载
  • 原文地址:https://www.cnblogs.com/cmy1996/p/9155907.html
Copyright © 2011-2022 走看看