gpt4 book ai didi

javascript - 生成带有文本框的表格

转载 作者:行者123 更新时间:2023-12-03 08:20:59 26 4
gpt4 key购买 nike

我有一些 php 编码经验,但对 js 还很陌生。我试图在 js 中做的是创建一个简单的订单表单,每一行都有一个文本框,指示要订购的数量、产品名称和产品价格,后者从产品数组 prod 中填充。我相当初级的第一次尝试如下所示,不用说这是行不通的。

<body onload="populate()">
<table id="demo">
<thead>
<tr>
<th>Quantity</th>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script>
function populate(){
var prod; //array of objects with name and price attributes
var table = document.getElementById("theTable");

for (var i=0; i<prod.length; i++)
{

var newTr = table.insertRow(-1);
var numOrdered=document.createElement('input');
numOrdered.type='text';
numOrdered.id= "product "+i; //assigning id of "product i" to each product i
newTr.insertCell(0).appendChild(num);
newTr.insertCell(-1).appendChild(document.createTextNode(prod["name"]));
newTr.insertCell(-1).appendChild(document.createTextNode(prod["price"]));
}
}
</script>
</body>

感谢任何和所有帮助。

最佳答案

看看底部的代码片段。

改变的是:

在这一行中,您定位了错误的 ID,应该是“演示”

var table = document.getElementById("theTable");

您还需要在循环内引用数组中的正确值:

document.createTextNode(prod["name"]);

至:

document.createTextNode(prod[i]["name"]);

最后这一行:

newTr.insertCell(0).appendChild(num);

至:

newTr.insertCell(0).appendChild(numOrdered);

希望这有帮助。

function populate() {
var prod = [{
name: 'box',
price: 20
}, {
name: 'plane',
price: 40
}]; //array of objects with name and price attributes
var table = document.getElementById("theTable");

for (var i = 0; i < prod.length; i++) {

var newTr = table.insertRow(-1);
var numOrdered = document.createElement('input');
numOrdered.type = 'text';
numOrdered.id = "product " + i; //assigning id of "product i" to each product i
newTr.insertCell(0).appendChild(numOrdered);
newTr.insertCell(-1).appendChild(document.createTextNode(prod[i]["name"]));
newTr.insertCell(-1).appendChild(document.createTextNode(prod[i]["price"]));
}
}

populate();
<table id="theTable">
<thead>
<tr>
<th>Quantity</th>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>

关于javascript - 生成带有文本框的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33751415/

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