Question

我在php中有一些编码经验，但对js来说还算新手。我在js中尝试做的是创建一个简单的订单表单，每行都有一个文本框，指示要订购的数量，产品名称和产品价格，后者将从产品阵列产品中填充。我的相当初步的第一次尝试出现在下面，不用说不起作用。

<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>

任何和所有帮助表示赞赏。

Answer 1

看一下底部的片段。

改变的是：

在这一行中你定位了错误的ID，应该是＆＃39; demo＆＃39;

public property

你还需要在循环中引用数组中的正确值：

Class empclass
{ 
    public RelayCommand command {get;set;}
    ...
}

为：

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

最后这一行：

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

为：

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

希望这会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试此代码：

我正在使用jQuery来创建，追加和迭代数组（每个循环）。这是一种更好，更有效的方法。请使用jQuery进行DOM操作。

HTML：

<table id="demo">
<thead>
                <tr>
                    <th>Quantity</th>
                    <th>Product</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

CSS：

table,td{display:block}
th{width:100px}
td{margin:10px}

JS：

var prod = [{product：＆＃39; samsung＆＃39;，price：100}，{product：＆＃39; apple＆＃39;，price：200}，{product：＆＃39; micromax＆＃ 39;，价格：300}];

(function($){
$.each(prod,function(index,value){
$('#demo th:eq(0)').append("<td><input type='text'></td>");
$('#demo th:eq(1)').append("<td>"+value.product.toUpperCase()+"</td>");
$('#demo th:eq(2)').append("<td>"+value.price+"</td>")
});
})(jQuery);

这是JSFiddle链接：

https://jsfiddle.net/Dee0565/8vww1pwf/

生成带有文本框的表

2 个答案: