JS动态创建Table,Tr,Td并赋值的具体实现

下面是“JS动态创建Table,Tr,Td并赋值的具体实现”的攻略。

下面是“JS动态创建Table,Tr,Td并赋值的具体实现”的攻略。

实现方法

使用JavaScript可以很方便地动态创建表格，具体步骤如下：

1. 创建一个
   元素，用于存放动态创建的表格。
   使用JavaScript的循环语句，例如for循环或while循环，根据需要动态创建需要的行（tr）和列（td）。
   在创建每个行（tr）时，使用循环语句动态创建所需的列（td）。
   可以使用innerHTML或createElement配合appendChild方法为每个td节点添加内容。

   示例1：创建一个3行3列的表格并填充内容

   // 创建一个table元素
   var table = document.createElement("table"); 
   // 循环创建行
   for (var i = 0; i < 3; i++) { 
     var tr = document.createElement("tr");
     // 循环创建列
     for (var j = 0; j < 3; j++) { 
       var td = document.createElement("td");
       td.innerHTML = "row " + i + ", column " + j; // 给列添加内容
       tr.appendChild(td); // 把列添加到行
     }
     table.appendChild(tr); // 把行添加到表格
   }
   document.body.appendChild(table); // 把表格添加到页面
   

   示例2：使用数组创建表格，并使用鼠标事件改变表格内容

   var data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // 定义一个数据数组
   var table = document.createElement("table");
   // 循环创建行
   for (var i = 0; i < data.length; i++) {
     var tr = document.createElement("tr");
     // 循环创建列
     for (var j = 0; j < data[i].length; j++) {
       var td = document.createElement("td");
       td.innerHTML = data[i][j]; // 给列添加数据
       // 给列添加鼠标事件监听器
       td.addEventListener("click", function() {
         if (this.innerHTML % 2 === 0) { // 如果是偶数，则变为奇数
           this.innerHTML = parseInt(this.innerHTML) + 1;
         } else { // 如果是奇数，则变为偶数
           this.innerHTML = parseInt(this.innerHTML) - 1;
         }
       });
       tr.appendChild(td); // 把列添加到行
     }
     table.appendChild(tr); // 把行添加到表格
   }
   document.body.appendChild(table); // 把表格添加到页面
   

   以上两个示例可以在浏览器的控制台或script标签中运行查看效果。