Question

请参考此图片，以便我更好地解释这个问题。我有Master / Detail表单（本例中为Bill of Materials），它将数据存储在2个数据库表中。

表单的顶部（Product，Quantity）存储在Master表中，并且使用插入的id（作为FK），Details表中填充了下面输入的组件和数量。

但是，在按下最后的SAVE（提交）之前，我将组件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不提交或刷新页面）
如何在阵列中为每个对象添加“删除”功能？
如何检查数组中是否已存在某个组件，只需加上数量？

这是我的表格： enter image description here

非常感谢你！

P.S。我正在努力实现这样的目标：How to store temporary data at the client-side and then send it to the server

Answer 1

因为您在这里使用Ajax标记它是如何进行ajax调用并返回已处理的数据

您需要向Servlet发出XML Http请求，以便在HTML页面的javascript中创建XML Http对象

var myxmlhttpobj=new GetXmlHttpObject();
function GetXmlHttpObject()
    {
        if (window.XMLHttpRequest)
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            return new XMLHttpRequest();
        }
        if (window.ActiveXObject)
        {
            // code for IE6, IE5
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        return null;
    }

现在您需要从javascript

向服务器发出请求

var url="urlofPHPpage";
var para="parmeter1=prodname_fk&parameter2=prodname&parameter3=quantity;
myxmlhttpobj.open("POST",url,true);
myxmlhttpobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myxmlhttpobj.setRequestHeader("Content-length", para.length);
myxmlhttpobj.setRequestHeader("Connection", "close");
myxmlhttpobj.onreadystatechange=ajaxComplete;
myxmlhttpobj.send(para);

在服务器上，您需要处理结果并将其作为字符串发回：

处理输入并准备添加的目录并将其发回

以字符串

的形式写出输出

当请求返回时，myxmlhttpobj.onreadystatechange = ajaxComplete;将被称为

function ajaxComplete(){


    if(myxmlhttpobj.readyState==4){

      ///Display the result on the HTML Page 

    }
}

那应该有帮助...

另请查看jQuery Ajax API。

Answer 2

一种可能的方法是将临时数据放在普通可见字段旁边的隐藏字段中，就像您可以使用javascript轻松获取这些隐藏字段值并发送到服务器，还因为隐藏字段是输入标记，如果您提交表单，您可以从服务器端获取任何其他输入标记的值。

Answer 3

假设您想在html表中使用thead和tbody组件显示它，您可以在add方法的click事件中编写类似这样的内容

$('<tr>').append($('<td>').text(prodname))
             .append($('<td>').text(quantity))
             .append($('<td>').append($('<button>').text('Delete').addClass('Delete').attr('id', CurrentIDHere)))
             .appendTo('tbody');

您可以在验证逻辑之后将此代码放在添加按钮的单击事件中。您可以为删除类添加一个单击处理程序，您可以在其中获取详细信息部分的ID并从数组中删除相应的条目。代码未经测试

Answer 4

要将值添加到表中，请查看$.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();
        });
    }

    ...

});

未经测试，请原谅错别字。概念是正确的。

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

4 个答案: