gpt4 book ai didi

javascript - 如何使用 html 用户输入在 jQuery 中创建表格?

转载 作者:行者123 更新时间:2023-12-03 10:27:26 25 4
gpt4 key购买 nike

我还很初级,所以我不确定我的问题措辞是否正确。

我希望在 HTML 中创建一个文本框,用户可以在其中输入表的列数和行数。从那里我需要使用 Javascript/Jquery 在单击按钮时创建表。

到目前为止,我已经能够创建文本框。我将输入的数字捕获到变量中,并创建了两个 for 循环。

这不起作用...:/

<body>

Set Rows:<br>
<input type="text" id="setRows">
<br>
Set Columns:<br>
<input type="text" id="setColumns">

<button type='button' onclick='myForm()'>Create Table</button>
<p id = "demo1"></p>
<p id = "demo2"></p>

</body>
<小时/>
function myForm()
{
var setRows = document.getElementById("setRows").value;
//document.getElementById("demo1").innerHTML = setRows;

var setColumns = document.getElementById("setColumns").value;
//document.getElementById("demo2").innerHTML = setColumns;


}

$(document).ready(function()
{
$("button").click(function()
{
$("<table></table>").insertAfter("p:last");

for (i = 0; i < setRows; i++)
{
$("<tr></tr>").appendTo("table");
}

for (i = 0; i < setColumns; i++)
{
$("<td>column</td>").appendTo("tr");
}
});

});

最佳答案

主要问题是您在与使用变量 setRowssetColumns 不同的函数中设置变量。您应该在一个函数中完成所有操作 - 要么使用 onclick 属性绑定(bind)它,要么使用 $("button").click() - 而不是将其拆分为单独的函数功能。

我还认为使用嵌套循环会更清楚,以使您向每一行添加单元格的情况更加明显。如果有多个目标,appendTo() 会自动克隆正在附加的对象,但这是一个晦涩的功能(我对 jQuery 非常有经验,直到现在才知道)这么明显。如果您需要在每个单元格中放置不同的值(例如,从数据数组中填充它们,或者使用“row I col J”之类的内容进行初始化),它也将使代码更容易扩展。

function myForm() {
var setRows = $("#setRows").val();
var setColumns = $("#setColumns").val();
var table = $("<table>").insertAfter("p:last");
for (var i = 0; i < setRows; i++) {
var row = $("<tr>");
for (var j = 0; j < setColumns; j++) {
$("<td>column</td>").appendTo(row);
}
table.append(row);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Set Rows:<br>
<input type="text" id="setRows">
<br>
Set Columns:<br>
<input type="text" id="setColumns">

<button type='button' onclick='myForm()'>Create Table</button>
<p id = "demo1"></p>
<p id = "demo2"></p>

关于javascript - 如何使用 html 用户输入在 jQuery 中创建表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29354514/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com