用innerHTML构建表

Building table with innerHTML

本文关键字：构建 innerHTML      更新时间：2023-09-26

基本上我用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>';
                }

首先你不能通过输入它的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>';
}

这里有一个Demo示例

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

相关文章：