本文介绍如何使用JavaScript根据用户输入的行数和列数动态生成HTML表格。通过获取输入框值，利用双层循环构建表格字符串，并插入到指定DOM元素中，实现简单的表格动态渲染功能。
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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。