附加到表的数据被添加到一列而不是全部四列答案

【问题标题】：Data appended to table is added to one column instead of all four附加到表的数据被添加到一列而不是全部四列
【发布时间】：2017-10-25 11:25:30
【问题描述】：

这是一个用 JavaScript 为购物车创建的简化引导表。我有一排四列。问题是当我在 Chrome 中打开它时，第 2、3 和 4 列的所有数据都放在第 1 列中。

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>
    <div class="container" id="productsList">
    </div>

    <script>
            var productsList = document.getElementById('productsList');
            productsList.innerHTML += '<table class="table table-striped">' +
                                          '<thead>' +
                                              '<tr>' +
                                              '<th>Shopping cart</th>' +
                                              '<th>Name</th>' +
                                              '<th>Price</th>' +
                                              '<th>Quantity</th>' +
                                              '</tr>' +
                                          '</thead>' +
                                          '<tbody>';


            productsList.innerHTML += '<tr>' +
                                              '<td><div><img style="width:200px; height:300px;" src="nopicture.jpg" /></div></td>' +
                                              '<td>' +
                                                  '<h6 id="productname"> Nice Product</h6>' +
                                                  '<a href="#" onclick="deleteProduct(\'' + name + '\')" class="btn btn-primary">Delete</a>' +
                                              '</td>' +
                                              '<td><div id="productprice">Tshs. 5000/=</div></td>' +
                                              '<td><div id="productquantity">3</div></td>' +
                                          '</tr>';




            productsList.innerHTML +=  '</tbody>' +
                                          '</table>';

    </script>
</body>

function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');

productsList.innerHTML += '<table class="table table-striped">' +
                              '<thead>' +
                                  '<tr>' +
                                  '<th>Shopping cart</th>' +
                                  '<th>Name</th>' +
                                  '<th>Price</th>' +
                                  '<th>Quantity</th>' +
                                  '</tr>' +
                              '</thead>' +
                              '<tbody>';
for(var i in products) {
    var picture = products[i].picture;
    var name = products[i].name;
    var price = products[i].price;
    var quantity = products[i].quantity;

    productsList.innerHTML += '<tr>' +
                                  '<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
                                  '<td>' +
                                      '<h6 id="productname">' + name + '</h6>' +
                                      '<a href="#" onclick="deleteProduct(\'' + name + '\')" class="btn btn-primary">Delete</a>' +
                                  '</td>' +
                                  '<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
                                  '<td><div id="productquantity">' + quantity + '</div></td>' +
                              '</tr>';

}


   productsList.innerHTML +=  '</tbody>' +
                              '</table>';

}

【问题讨论】：

标签： javascript twitter-bootstrap html-table

【解决方案1】：

您不能附加到这样的元素的innerHTML。当您第一次这样做时，Chrome 会尝试为您关闭表格并使其成为有效的 HTML。在使用</table> 关闭表格后，您第二次附加 HTML。而是将 HTML 放入一个局部变量中，然后在最后分配一次 innerHTML。

function fetchProducts() {
    var products = JSON.parse(localStorage.getItem('products'));
    var productsList = document.getElementById('productsList');

    var content = '<table class="table table-striped">' +
                                  '<thead>' +
                                      '<tr>' +
                                      '<th>Shopping cart</th>' +
                                      '<th>Name</th>' +
                                      '<th>Price</th>' +
                                      '<th>Quantity</th>' +
                                      '</tr>' +
                                  '</thead>' +
                                  '<tbody>';
    for (var i in products) {
        var picture = products[i].picture;
        var name = products[i].name;
        var price = products[i].price;
        var quantity = products[i].quantity;

        content += '<tr>' +
                                      '<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
                                      '<td>' +
                                          '<h6 id="productname">' + name + '</h6>' +
                                          '<a href="#" onclick="deleteProduct(\'' + name + '\')" class="btn btn-primary">Delete</a>' +
                                      '</td>' +
                                      '<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
                                      '<td><div id="productquantity">' + quantity + '</div></td>' +
                                  '</tr>';

    }


    content += '</tbody>' + '</table>';
    productsList.innerHTML = content;
}

【讨论】：

@aaronw 我必须动态输入数据的问题，有一个for循环可以在中间部分动态添加数据productsList.innerHTML，这就是我将它们分开的原因。我需要动态添加tr
这没有任何改变。没有理由不能在循环中附加到局部变量而不是 productsList.innerHTML。
照@PaulAbbott 说的做，Here 是一个更新的小提琴。
我添加了一个真正使用的功能。
@PaulAbbott 我对 javascript 有点陌生，我不太了解你，但那是我的功能