下面是“JS动态创建Table,Tr,Td并赋值的具体实现”的攻略。
实现方法
使用JavaScript可以很方便地动态创建表格，具体步骤如下：
- 创建一个
元素，用于存放动态创建的表格。
- 使用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标签中运行查看效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS动态创建Table,Tr,Td并赋值的具体实现 - Python技术站
赞 (0)一篇文章弄懂js中的typeof用法上一篇 2023年6月11日js点击更换背景颜色或图片的实例代码下一篇 2023年6月11日合作推广
分享本页返回顶部
微信扫一扫 
支付宝扫一扫 