使用for循环操作dom节点制作一个九九乘法表

37 阅读1分钟
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      td {
        width: 150px;
        height: 20px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <table id="mytable"></table>
  </body>
  <script>
    // 9行9列的
    // 找到table
    // 创建行挂到table
    // 创建列挂到行
    var tr = null;
    var td = null;
    var table = document.getElementById("mytable");
    for (var i = 1; i <= 9; i++) {
      tr = document.createElement("tr");
      for (var j = 1; j <= i; j++) {
        td = document.createElement("td");
        td.innerHTML = j + "乘以" + i + "等于 " + i * j;
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
  </script>
</html>