php - 在表中显示客户端临时数据

Question

请引用此图片，以便我可以更好地解释该问题。我有主/详细表单(在本例中为 Material list )，它将数据存储在 2 个数据库表中。

表单的顶部(产品、数量)存储在主表中，并且通过插入的 ID(如 FK)，详细信息表将填充下面输入的尽可能多的组件和数量。

但是，在按下最后的“保存”(提交)之前，我会将组件 ID(来自下拉列表的值)和数量(来自输入字段)存储到数组中的 JavaScript 对象中:

var products = [];
        $("#add").click(function(){

            var prodname_fk = $("select").val();
            var prodname = $("select option:selected").text();
            var quantity = $("#quantity").val();

                //Checks if the product or quantity has not been selected
                if (quantity == '' || prodname_fk == '')
                {
                    alert("Please select product and quantity!");
                    return false;
                }
            //Pushes the Objects(products [id,quantity,prodname,uom]) into the Array    
            products.push({id:prodname_fk,prodname:prodname,quantity:quantity});

                //Test Purpose CONSOLE output
                var i = 0;
                $.each(products, function(){
                        console.log(products[i].id + " --> " + products[i].prodname + " --> " + products[i].quantity);
                        i++;

                });

            //Emptys the product and quantity
            $("select").val("");
            $("#quantity").val(""); 
        });

我还获取产品名称(来自保管箱的文本)用于在下表中显示。

所以，我的问题是:

• 每次按下 ADD 后，如何在显示“无记录!”的表中输出成分和数量？ (ADD不提交也不刷新页面)

• 如何在同一个表中为数组中的每个对象添加“删除”功能？

• 如何检查数组中是否已存在某个组件，然后将数量相加？

这是我的表格:

提前非常感谢您!

附:我正在尝试实现这样的目标:How to store temporary data at the client-side and then send it to the server

Answer 1

要将值添加到表中，请查看 $.append()和$.appendTo() 。通过 $("<tr />") 创建新行并将其附加到您的表中 $.appendTo() :

var newRow = $("<tr />").appendTo("#myTable");

您现在拥有对新行​​的引用，因此您现在可以附加单元格:

var newRow = $("<tr productId=\"" + prodname_fk  + "\" />")
    .appendTo("#myTable")
    .append("<td class=\"code\" />")
    .append("<td class=\"component\">" + prodname + "</td>")
    .append("<td class=\"quantity\">" + quantity + "</td>")
    .append("<td class=\"uom\" />")
    .append("<td><span class="deleteButton">delete</span></td>");

像这样删除行:

$("#myTable .deleteButton").click(function(e) {
    $(this).closest("tr").remove();
});

为了处理存储数据，我将使用对象而不是数组:

var products = {};
$("#add").click(function() {

    ...

    if (prodname_fk in products) {
        products[prodname_fk].quantity += quantity;
        $("#myTable tr[productId='" + prodname_fk + "'] .quantity").text(products[prodname_fk].quantity)
    }
    else {
        products[prodname_fk] = { prodname:prodname, quantity:quantity };
        var newRow = $("<tr productId=\"" + prodname_fk  + "\" />")
            ... // append to table and append cells
        $(".delete", newRow).click(function(e) {
            delete products[$(this).closest("tr").attr("productId")];
            $(this).closest("tr").remove();
        });
    }

    ...

});

未经测试，因此请原谅拼写错误。这些概念是正确的。