Обновление таблицы в html из javascript - PullRequest
Новая
       6

Обновление таблицы в html из javascript

0 голосов
/ 29 мая 2018

Я пытался обновить таблицу, которая должна быть «корзиной покупок».Однако после нажатия кнопки «добавить в корзину» моя таблица не обновляется.

html для javascript просто использует getElementbyId, и обе таблицы появляются на экране, когда я запускаю html-файл.

Я все еще довольно новичок в javascript, поэтому я надеялся, что кто-то сбольше опыта может перепроверить для меня, чтобы увидеть, что у меня есть то, что мне нужно. 

var html = "<table border = '1|1' >";

html += "<td>Product Name</td>";
html += "<td>Product Description</td>";
html += "<td>Price</td>";
html += "<td>Add to Cart</td>";

for (var i = 0; i < products.length; i ++) {
    html += "<tr>";
    html += "<td>" + products[i].product_name + "</td>";
    html += "<td>" + products[i].product_desc + "</td>";
    html += "<td>" + products[i].product_price + "</td>";
    html += "<td>" + <button type = 'submit' onclick = 'addCart(products[i].product_name, this)'>Add to Cart</button> + "</td>";
    html += "</tr>";

}

html += "</table>";

document.getElementById("location1").innerHTML = html;


function addCart(product_id) {
    for (var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            var cartItem = null;
            for (var k = 0; k < cart.length; k++) {
                if (cart[k].product.product_id == products[i].product_id) {
                    cartItem = cart[k];
                    cart[k].product_qty++;
                    break;
                }
            }
            if (cartItem == null) {
                var cartItem = {
                    product: products[i],
                    product_qty: products[i].product_qty 
                };
                cart.push(cartItem);
            }
        }
    }
    renderCartTable();

}

//RenderCartTable & its functions
function addCart(product_id) {
    for (var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            var cartItem = null;
            for (var k = 0; k < cart.length; k++) {
                if (cart[k].product.product_id == products[i].product_id) {
                    cartItem = cart[k];
                    cart[k].product_qty++;
                    break;
                }
            }
            if (cartItem == null) {

                cartItem = {
                    product: products[i],
                    product_qty: products[i].product_qty 
                };
                cart.push(cartItem);

            }
        }
    }
}

Код берется из списка продуктов и создает таблицу с названием, описанием и ценой товара,вместе с кнопкой Добавить в корзину.Кнопка предназначена для добавления элемента в другой список, который называется «корзина».
Любая и вся помощь приветствуется.Спасибо за ваше время!

Ниже приведен весь код - 

<!DOCTYPE html>
<html>
    <body>
        <br/>
        <p id="location1"> </p>
        <br/>
        <h2> Shopping Cart </h2>
        <p id="location2"> </p>
        <h2>Grand Total:</h2>
        <p id="location3"> </p>


        <script type="text/javascript", language="javascript", src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
            var products = [];
            var cart = [];

            //label individual products below in individual lists, and then have the product put through the product_setup function
            var product1 = ["Anvil", "Premium Grade Iron", 119.99];
            var product2 = ["Female Roadrunner Costume", "Guaranteed to attract Male Roadrunners", 54.99];

            function product_setup(product) {
                var productID = product[0];
                var product_desc = product[1];
                var qty = 1;
                var price = product[2];

                var newProduct = {
                    product_id: null,
                    product_desc: null,
                    product_qty: 0,
                    product_price: 0.00,
                };
                newProduct.product_id = productID;
                newProduct.product_desc = product_desc;
                newProduct.product_qty = qty;
                newProduct.product_price = price;


                products.push(newProduct);
            }

            product_setup(product1);
            product_setup(product2);    


            function product_table() {
                var html = "<table border = '1|1' >";

                html += "<td>Product Name</td>";
                html += "<td>Product Description</td>";
                html += "<td>Price</td>";
                html += "<td> </td>";


                for (var i = 0; i < products.length; i ++) {
                    html += "<tr>";
                    html += "<td>" + products[i].product_id + "</td>";
                    html += "<td>" + products[i].product_desc + "</td>";
                    html += "<td>" + products[i].product_price + "</td>";
                    html += "<td>" + "<button type = 'submit' onclick = 'addCart(products[i].product_id, this)'>Add to Cart</button>" + "</td>";
                    html += "</tr>";
                }

                html += "</table>";

                document.getElementById("location1").innerHTML = html;
            }
            product_table();

            function subtractQuantity(product_id) { 
                for (var i = 0; i < cart.length; i++) {
                    if (cart[i].product.product_id == product_id) {
                        cart[i].product_qty--;
                    }

                    if (cart[i].product_qty == 0) {
                        cart.splice(i,1);
                    }
                }
                renderCartTable();
            }

            function addQuantity(product_id) {
                for (var i = 0; i < cart.length; i++) {
                    if (cart[i].product.product_id == product_id) {
                        cart[i].product_qty++;
                    }  
                }
                renderCartTable();
            }

            function removeItem(product_id) {
                for (var i = 0; i < cart.length; i++) {
                    if (cart[i].product.product_id == product_id) {
                        cart.splice(i,1);
                    }
                }
                renderCartTable();
            }

            function renderCartTable() {
                var html = '';
                var ele = document.getElementById("location2");
                ele.innerHTML = ''; 

                html += "<table id='tblCart' border='1|1'>";
                html += "<tr><td>Product ID</td>";
                html += "<td>Product Description</td>";
                html += "<td>Quantity</td>";
                html += "<td>Price</td>";
                html += "<td>Total</td>";
                html += "<td>Action</td></tr>";
                var GrandTotal = 0;
                for (var i = 0; i < cart.length; i++) {
                    html += "<tr>";
                    html += "<td>" + cart[i].product.product_id + "</td>";
                    html += "<td>" + cart[i].product.product_desc + "</td>";
                    html += "<td>" + cart[i].product_qty + "</td>";
                    html += "<td>" + cart[i].product.product_price + "</td>";
                    html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty, 10) + "</td>";
                    html += "<td><button type='submit' onClick= 'subtractQuantity(\"" + cart[i].product.product_id + "\", this);'>Subtract Item</button> &nbsp <button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/>Add Item</button> &nbsp<button type='submit' onClick='removeItem(\"" + cart[i].product.product_id + "\", this);'/>Remove Item</button></td>";
                    html += "</tr>";

                    GrandTotal += parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty, 10);
                }

                document.getElementById("location3").innerHTML = "$ " + GrandTotal;
                html += "</table>";
                ele.innerHTML = html;
            }
            renderCartTable();

            function addCart(product_id) {
                for (var i = 0; i < products.length; i++) {
                    if (products[i].product_id == product_id) {
                        var cartItem = null;
                        for (var k = 0; k < cart.length; k++) {
                            if (cart[k].product.product_id == products[i].product_id) {
                                cartItem = cart[k];
                                cart[k].product_qty++;
                                break;
                            }
                        }
                        if (cartItem == null) {

                            cartItem = {
                                product: products[i],
                                product_qty: products[i].product_qty 
                            };
                            cart.push(cartItem);

                        }
                    }
                }
                renderCartTable();
            }
        </script>
    </body>
</html>

Ответы [ 4 ]

0 голосов
/ 29 мая 2018

попробуйте, надеюсь, это сработает: 

var html = "<table border = '1|1' >";
html += "<td>Product Name</td>";
html += "<td>Product Description</td>";
html += "<td>Price</td>";
html += "<td>Add to Cart</td>";

for (var i = 0; i < products.length; i ++) {
    html += "<tr>";
    html += "<td>" + products[i].product_name + "</td>";
    html += "<td>" + products[i].product_desc + "</td>";
    html += "<td>" + products[i].product_price + "</td>";
    html += "<td>" + "<button type = 'submit' onclick = 'addCart("+products[i].product_id+", this)'>Add to Cart</button>" + "</td>";
    html += "</tr>";
}

html += "</table>";

document.getElementById("location1").innerHTML = html;

function addCart(product_id) {
    for (var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            var cartItem = null, cartItemId;
            if (cart.length > 0)
                for (var k = 0; k < cart.length; k++) {
                    if (cart[k].product.product_id == products[i].product_id) {
                        cartItem = cart[k];
                        cart[k].product_qty++;
                        break;
                    } 
                }
            if (cartItem == null) {
                var cartItem = {
                    product: products[i],
                    product_qty: products[i].product_qty  + 1
                };
                cartItemId = cart.push(cartItem);
            }
        }
    }
    renderCartTable();
}

также убедитесь, что массив products выглядит следующим образом: 

var products = [
    {product_id: 0, product_name: "item1", product_desc: "desc1", product_price: 100, product_qty: 0},
    {product_id: 1, product_name: "item2", product_desc: "desc2", product_price: 200, product_qty: 0},
    {product_id: 2, product_name: "item3", product_desc: "desc3", product_price: 300, product_qty: 0},
    {product_id: 3, product_name: "item4", product_desc: "desc4", product_price: 400, product_qty: 0}
];
0 голосов
/ 29 мая 2018

Я думаю, что вы передаете product_name в addCart и проверяете его по product_id.

Попробуйте ввести debugger; и проверьте значение, которое вы получаете в функции.

0 голосов
/ 29 мая 2018

Вы хотите это: 

html += "<td>" + "<button type = 'submit' onclick = 'addCart(\"" + products[i].product_id + "\")'>Add to Cart</button>" + "</td>";

В вашем случае, при нажатии кнопки onclick = 'addCart(products[i].product_id), i внутри products[i] известно только внутри product_table(){...}, поэтому при вызове вне контекстаi не определено.Была попытка передать контекст при использовании this, хотя хорошая идея, что i будет знать внутри addCart, а не там, где вызывается addCart (глобальный контекст или окно), а так как цикл forпродолжает, что i не будет иметь правильное значение.

Таким образом, вместо этого мы передаем весь идентификатор продукта в виде строки, и это работает.

Итак, как мы можем избавиться от уродливогоescape-строки?

Литералы шаблона почти всегда красивее html += `<td><button type = 'submit' onclick = 'addCart("${products[i].product_id}")'>Add to Cart</button></td>`;, но это особенность ES6 (поэтому проверьте, какие браузеры вам нужно поддерживать).

Я думаю, что привязка события click кконтейнер, а вне функции рендеринга было бы красивее.Так как нам нужен только один слушатель.В отличие от создания новых кликов при каждом вызове renderCartTable. 

var clickHandler = function(evt){
    if(evt.target.nodeName === 'BUTTON'){
      // Check that we have the right button (from a class perhaps)
      // parse out data from event.target.parentElement
      // or pass in product-id via a data attribute
    }
};
document.getElementById("location1").addEventListener('click', clickHandler)
0 голосов
/ 29 мая 2018

функции не будут работать с добавленными данными, поэтому лучше использовать JQuery или что-то в этом роде. 

  $('#myTable').on('click','.addToCart',function(){
         //perform something...
  });

Вы также можете сделать 

  $(document).on('click','.addToCart',function(){
         //perform something...
  });
...