JavaScript动态生成表格实现教程

作者：半夏时间：2026-10-23 20:18:25浏览：495

本文介绍如何使用JavaScript根据用户输入的行数和列数动态生成HTML表格。通过获取输入框值，利用双层循环构建表格字符串，并插入到指定DOM元素中，实现简单的表格动态渲染功能。

JavaScript动态生成表格实现教程

本文分享一段使用JavaScript动态创建表格的完整代码示例，供读者参考学习。

功能描述

该功能允许用户在输入框中分别指定表格的行数和列数，点击按钮后，系统会生成一个具有对应行列结构的表格，效果如图所示。

JavaScript动态生成表格实现教程

分析与实现步骤

分析

HTML界面设计


<body>
 行：<input type="text" id="row" /> 
 列： <input type="text" id="col" />
 <input type="button" name="go" id="go" value="go" onclick="add()" />
 <br /><br />
 <div id="table"> </div>
</body>

接下来是JavaScript代码的具体实现部分。

首先，需要获取用户输入的行数和列数值。


var row = document.getElementById("row").value;
var col = document.getElementById("col").value;

随后生成表格结构。创建一个字符串变量用于存储HTML代码，通过外层循环遍历行、内层循环遍历列，逐次追加单元格标签，从而构建完整的表格HTML字符串。


var str += '<table border="1" >';
for(var i = 0; i < row; i++) {
 str += '<tr>';
 for(var j = 0; j < col; j++) {
 str += '<td height="30px" width="100px"></td>';
 }
 str += '</tr>';
}
str += '</table>';

最后，获取用于承载表格的容器元素对象，并将生成的表格HTML字符串赋值给该元素的innerHTML属性，从而在页面上显示表格。


var divobj = document.getElementById("table");
divobj.innerHTML = str;

完整代码示例

代码


<body>
 行：<input type="text" id="row" /> 
 列： <input type="text" id="col" />
 <input type="button" name="go" id="go" value="go" onclick="add()" />
 <br /><br />
 <div id="table"> </div>
</body>

<script type="text/javascript">
 function add() {
 var row = document.getElementById("row").value;
 var col = document.getElementById("col").value;
 //alert(row + "*" + col);
 var str = "";
 //alert(str);
 str += '<table border="1" >';
 for(var i = 0; i < row; i++) {
 str += '<tr>';
 for(var j = 0; j < col; j++) {
 str += '<td height="30px" width="100px"></td>';
 }
 str += '</tr>';
 }
 str += '</table>';
 var divobj = document.getElementById("table");
 divobj.innerHTML = str;
 }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13