Question

基本上我用HTML构建一个表，然后将使用Javascript根据需要添加更多信息。

我像这样构建表：

<form id ="shopping_form">

        <!-- SHOPPING TABLE -->
        <table id = 'items_table' border = 1>
            <tr><th colspan = '2'>Shopping List</th></tr>
            <tr><th>Item</th><th>Price</th></tr>
       </table>
</form>

这会构建一个表并为其提供标题。后来我想用Javascript向表中添加信息。我知道我在逻辑上正确地做了这件事，但我遇到了一些我无法理解的语法错误。

使用Javascript：

//Add items to shopping table
                for(var ctr = 0; ctr < 10; ctr++)
                {
                    shopping_form.items_table.innerHTML = '<tr>';
                        shopping_form.items_table.innerHTML += '<td>' + itemList[ctr].item + '</td>';
                        shopping_form.items_table.innerHTML += '<td>' + itemList[ctr].price + '.00' + '</td>';
                    shopping_form.items_table.innerHTML += '</tr>';
                }

Answer 1

首先你不能通过输入它的id来选择DOM元素！你需要使用 document.getElementById来获取元素。然后你就可以开始在你的内部html中添加文本，但是你必须在第一次使用+=来替换你的标题元素。

你的js将是：

var itemList = [
            {'item': '1', 'price' : '100'},
            {'item': '2', 'price' : '200'},
            {'item': '3', 'price' : '300'},
            {'item': '4', 'price' : '400'},
            {'item': '5', 'price' : '500'}
           ]
//Add items to shopping table
items_table = document.getElementById('items_table');
for(var ctr = 0; ctr < 5; ctr++)
{
    items_table.innerHTML+= '<tr><td>' + itemList[ctr].item + '</td><td>' + itemList[ctr].price + '.00' + '</td></tr>';
}

此处为此{/ 3>} Demo example

或您可以使用 insertRow() and insertCell()方法

使用innerHTML构建表

1 个答案: