Javascript 附加到表中的数据被添加到一列，而不是全部四列_Javascript_Twitter Bootstrap_Html Table

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

javascript twitter-bootstrap

Javascript 附加到表中的数据被添加到一列，而不是全部四列,javascript,twitter-bootstrap,html-table,Javascript,Twitter Bootstrap,Html Table,这是一个用JavaScript为购物车创建的简化引导表。我有一行四列。问题是当我在Chrome中打开它时，列2、3和4的所有数据都放在列1中 <!DOCTYPE html> <html lang="en"> <head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/

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


var productsList=document.getElementById（'productsList'）；
productsList.innerHTML+=“”+
'' +
'' +
“购物车”+
“姓名”+
“价格”+
“数量”+
'' +
'' +
'';
productsList.innerHTML+=“”+
'' +
'' +
“好产品”+
'' +
'' +
"谢谢。5000/=' +
'3' +
'';
productsList.innerHTML+=“”+
'';

函数fetchProducts（）{
var products=JSON.parse（localStorage.getItem（'products'）；
var productsList=document.getElementById（'productsList'）；
productsList.innerHTML+=“”+
'' +
'' +
“购物车”+
“姓名”+
“价格”+
“数量”+
'' +
'' +
'';
用于（产品中的var i）{
var picture=产品[i].图片；
var name=products[i].name；
var价格=产品[i]。价格；
var数量=产品[i]。数量；
productsList.innerHTML+=“”+
'' +
'' +
''+姓名+''的+
'' +
'' +
“Tshs”。+价格+”/='+
''+数量+''+
'';
}
productsList.innerHTML+=“”+
'';
}

您不能将这样的元素附加到

innerHTML

。当您第一次这样做时，Chrome会尝试为您关闭表并使其成为有效的HTML。使用

关闭表后第二次+追加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;
}

函数fetchProducts（）{
var products=JSON.parse（localStorage.getItem（'products'）；
var productsList=document.getElementById（'productsList'）；
变量内容=“”+
'' +
'' +
“购物车”+
“姓名”+
“价格”+
“数量”+
'' +
'' +
'';
用于（产品中的var i）{
var picture=产品[i].图片；
var name=products[i].name；
var价格=产品[i]。价格；
var数量=产品[i]。数量；
内容+=''+
'' +
'' +
''+姓名+''的+
'' +
'' +
“Tshs”。+价格+”/='+
''+数量+''+
'';
}
内容+=''+''；
productsList.innerHTML=内容；
}

@a关于我必须动态输入数据的问题，有一个for循环，它在中间部分

productsList.innerHTML

中动态添加数据，这就是我将它们分开的原因。我需要添加

tr

dynamically，它不会改变任何东西。没有理由不能在循环中附加到局部变量而不是

productsList.innerHTML

。只需按照@PaulAbbott所说的做，这是一个更新的fiddle。我添加了一个实际使用的函数。@PaulAbbott我对javascript有点陌生我不太了解你，但那是我的函数

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