创建动态表格（实现单元格内随机数即随机颜色） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{
          margin:0;
          padding:0;
      }
      td{
          width:100px;
          height:30px;
          border:0;
          text-align:center;
      } 
    </style>
</head>
<body>
    行数：<input type="text" id="txt1">
    列数：<input type="text" id="txt2">
         <button id="btn">打印</button>
         <script src="../myApi.js"></script>
         <script>
             var obj = document.getElementsByTagName("body");   //  获取body
              var table = document.createElement("table");     //  创建一个表格
              obj.appendChild(table);                   //  将table节点添加到给获取body的对象中
            function cT(m,n){ 
                for(var i = 0; i < m; i++){                      //   行遍历
                  var row = document.createElement("tr");         //  创建行
                    table.appendChild(row);                      //   把行节点添加到父节点上
                    for(var j = 0; j < n; j++){                   //  列遍历
                        var col = document.createElement("td");
                        row.appendChild(col);
                        col.style.background = randomColor();      // 将行设置成随即色
                        col.innerHTML = randomNum(1,100);          // 将行添加随即色  使用innerHTML放入表格内
                    }
                }
             } 
             btn.onclick = function(){                          //  给按钮添加单击事件返回行和列传给函数的值
                 cT(txt1.value,txt2.value);   
            }
    
         </script>
</body>
</html>

 

posted @ 2019-09-06 08:57  zcjlllb  阅读(528)  评论(0)    收藏  举报