附加到表的数据将添加到一列而不是所有四列

这是用JavaScript为购物车创建的简化的Bootstrap表。我有一行四列。问题是当我在 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>';
}

你不能附加到这样的元素的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;
}

相关内容

最新更新

热门标签：