Question

这是一个用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>';

}

Answer 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;
}

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

1 个答案: