表に追加されたデータは、4つではなく1つの列に追加されます

これは、ショッピングカートのJavaScriptで作成された簡略化されたブートストラップ表です。私は4列の1列を持っています。問題は、私は、列2、3用のChromeですべてのデータを、それを開いて、4がすべての列に配置されているときである1表に追加されたデータは、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はあなたのテーブルを閉じて、それを有効なHTMLにしようとします。テーブルの後ろにHTMLを追加する2回目の時間は、</table>で終了します。代わりにローカル変数に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

これは正しいです。 [Here]（https://jsfiddle.net/r809ajLv/）はフィドルです。 – aaronw

@aaronwデータを動的に入力しなければならない問題は、その中間部分 'productsList.innerHTML'にデータを動的に追加するforループです。 'tr'を動的に追加する必要があります – Developer

何も変わりません。ループ内で 'productsList.innerHTML'の代わりにローカル変数に追加することができない理由はありません。 –

表に追加されたデータは、4つではなく1つの列に追加されます

答えて

関連する問題