CODEWITHSUNDEEP
javascripttwitter-bootstraphtml-table
Developer
Developer

Reputation: 178

Data appended to table is added to one column instead of all four

This is a simplified Bootstrap table created in JavaScript for a shopping cart. I have one row with four columns. The problem is when I open it in Chrome all the data for columns 2, 3 and 4 are all placed in column 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>';

}

Upvotes: 1

Views: 36

Answers (1)

Paul Abbott
Paul Abbott

Reputation: 7211

You can't append to the innerHTML of an element like that. When you do it the first time, Chrome tries to close out your table for you and make it valid HTML. The second+ time you are appending HTML after your table is closed with </table>. Put the HTML into a local variable instead and then assign innerHTML once at the end.

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

Upvotes: 2

Related Questions