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

问题描述：

这是一个用JavaScript为购物车创建的简化Bootstrap表。我有一行四列。问题是，当我在Chrome打开它的所有数据为3列2和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时，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; 
}

这是正确的。 [这里]（https://jsfiddle.net/r809ajLv/）是一个小提琴。 – aaronw

@aaronw我必须动态输入数据的问题，有一个for循环在中间部分'productsList.innerHTML'中动态添加数据，这就是为什么我将它们分开的原因。我需要动态添加“tr” – Developer

这不会改变任何内容。没有理由不能在一个循环内附加一个局部变量而不是'productsList.innerHTML'。 –

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

相关推荐