添加到表中的數據添加到一列而不是全部四列

這是一個用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>'; 

}

來源

2017-05-24 Developer

不能追加到的所述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; 
}

來源

2017-05-24 23:17:34

這是正確的。 [這裏]（https://jsfiddle.net/r809ajLv/）是一個小提琴。 – aaronw

@aaronw我必須動態輸入數據的問題，有一個for循環在中間部分'productsList.innerHTML'中動態添加數據，這就是爲什麼我將它們分開的原因。我需要動態添加「tr」 – Developer

這不會改變任何內容。沒有理由不能在一個循環內附加一個局部變量而不是'productsList.innerHTML'。 –

添加到表中的數據添加到一列而不是全部四列

回答

相關問題