jquery 动态生成表格文本框输入几就生成几行表格

原创

mob649e8158ed1f 2023-08-20 05:30:08 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8158ed1f的原创作品，请联系作者获取转载授权，否则将追究法律责任

动态生成表格的实现步骤

1. 创建 HTML 页面

首先，我们需要创建一个 HTML 页面，用于展示生成的动态表格。可以使用以下代码创建一个基础的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
    <title>动态生成表格</title>
    <script src="
</head>
<body>
    <form>
        <label for="rows">输入行数：</label>
        <input type="number" id="rows" name="rows" min="1" max="10">
        <button type="button" id="generate">生成表格</button>
    </form>
    <table id="table"></table>
    <script src="script.js"></script>
</body>
</html>

这段代码创建了一个包含一个输入框和一个按钮的表单，以及一个空的表格。其中，输入框用于用户输入行数，按钮用于触发生成表格的操作。表格和脚本文件引用需要在 </body> 标签之前，以确保在生成表格时脚本已加载。

2. 编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现动态生成表格的功能。将以下代码保存为 script.js 文件并与 HTML 页面相同的目录下：

$(document).ready(function() {
    // 监听按钮点击事件
    $('#generate').click(function() {
        // 获取用户输入的行数
        var rows = parseInt($('#rows').val());

        // 清空原有表格内容
        $('#table').empty();

        // 生成表格行
        for (var i = 0; i < rows; i++) {
            var row = $('<tr></tr>'); // 创建行元素

            // 生成表格列
            for (var j = 0; j < rows; j++) {
                var cell = $('<td></td>'); // 创建列元素
                var input = $('<input type="text">'); // 创建文本框元素
                cell.append(input); // 将文本框添加到列中
                row.append(cell); // 将列添加到行中
            }

            $('#table').append(row); // 将行添加到表格中
        }
    });
});

这段代码使用 jQuery 库来简化 DOM 操作。首先，通过 $(document).ready() 方法，确保代码在页面加载完成后执行。然后，监听按钮的点击事件，当按钮被点击时执行回调函数。

在回调函数中，首先获取用户输入的行数，使用 parseInt() 方法将输入转换为整数。然后，使用 $('#table').empty() 清空原有表格的内容，以便重新生成。

接着，使用 for 循环生成表格的行和列。在每次迭代中，使用 $('<tr></tr>') 创建行元素，并使用 $('<td></td>') 创建列元素。然后，使用 $('<input type="text">') 创建文本框元素，并将其添加到列中。最后，将列添加到行中，并将行添加到表格中。