BaiTap_Table_Động.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bài tập 1</title>
</head>
<body>
  <form action="#">
    Số dòng: <input type="text" id="sodong"/><br><br>
    Số cột: <input type="text" id="socot"/>
    <br><br>
    <input type="button" value="Tạo table động" onclick="return TaoTable()"/>
  </form>
  
  <div id="container">
    
  </div>
  
  <script type="text/javascript">
    function TaoTable(){
      var sodongId = document.getElementById("sodong");
      var socotId = document.getElementById("socot");
      // NaN = Not a Number --> hàm kiểm tra số : isNaN(chuỗi) --> là số --> Fale --> không phải số --> True
      
      if(isNaN(sodongId.value) || isNaN(socotId.value)){
        alert("Lỗi, Hãy nhập vào số, không nhập vào chữ cái hay những ký tự đặc biệt");
        return false;
      } else {
        // Tạo Table
        
        /* 
        <table>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </table> 
        */
        
        // Lấy thẻ div để tạo table
        var divId = document.getElementById("container");
        
        // Lấy số dòng, số cột người dùng nhập vào
        var soDong = parseInt(sodongId.value);
        var soCot = parseInt(socotId.value);
        
        // Tạo thẻ table
        var tagTable = document.createElement("table");
        tagTable.border = 2;
        for(i = 0; i < soDong; i++) {
          // Tạo thẻ dòng
          var tagTR = document.createElement("tr");
          tagTable.appendChild(tagTR);
          // Tạo cột
          for(j = 0; j < soCot; j++) {
            var tagTD = document.createElement("td");
            var textNode = document.createTextNode("ô "+i+", "+j);
            tagTD.appendChild(textNode);
            tagTR.appendChild(tagTD);
          }
        }
        divId.appendChild(tagTable);
        return true;
      }
    }
  </script>
</body>
</html>