3-18 node creation, removal and cloning exercises – dynamically create a table with 20 rows and 12 columns/multiplication table

Topic request

Code implementation

  <style>
    td {
      width: 40px;
      height: 20px;
      border: 1px solid #000;
    }
  </style>
Copy the code
<body>
  <table id="mytable"></table>
  <script>
    // Create a table with 20 rows and 12 columns dynamically
    var mytable = document.getElementById('mytable');

    // Create 20 rows
    for (var i = 0; i < 20; i++) {
      var tr = document.createElement('tr');
      // Create 12 columns
      for (var j = 0; j < 20; j++) {
        var td = document.createElement('td');
        // Append TD to tr
        tr.appendChild(td);
      }
      // Append tr to mytable tag
      mytable.appendChild(tr);
    }
  </script>
</body>
Copy the code

3-18 Simple exercises for Creating, removing, and cloning nodes – Multiplication Table 99 (based on the code in the previous topic)

Topic request

Code implementation

<! DOCTYPEhtml>
<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>practice</title>
  <style>
    td {
      width: 120px;
      height: 30px;
      border: 1px solid # 000;
    }
  </style>
</head>

<body>
  <table id="mytable"></table>
  <script>
    // Create a table with 20 rows and 12 columns dynamically
    var mytable = document.getElementById('mytable');

    // Create 20 rows
    for (var i = 1; i <= 9; i++) {
      var tr = document.createElement('tr');
      // Create 12 columns
      for (var j = 1; j <= i; j++) {
        var td = document.createElement('td');
        // Set td text
        td.innerText = i + The '*' + j + '='+ (i*j);
        // Append TD to tr
        tr.appendChild(td);
      }
      // Append tr to mytable tag
      mytable.appendChild(tr);
    }
  </script>
</body>

</html>
Copy the code

rendering