0

这与我之前的问题有关：How to add onclick function for programmatically created button。

现在，我目前有一个带有两个文本框、一个按钮和一个隐藏表格的表单。单击按钮时，将显示表格并添加一行，其中两列上的文本框的值和第三列上的删除按钮。我现在可以在单击删除按钮时删除选定的行。我的新问题是如何获取第一列和第二列的数据以便更新数据库？

我使用 JSON 来更新数据库。这是我目前拥有的代码：

$("#addToDisplay").click(function (event) {
    $("#tblProducts").removeClass("hide");
    var counter = 1;
    event.preventDefault();
    counter++;
    var prod = {prodName: $("#txtProducts").val(), prodQty: $("#txtQty").val()}
    $.ajax({
        type: "POST",
        traditional: true,
        url: "/Service/JsonUpdateProduct",
        dataType: "json",
        data: prod,
        success: function (result) {
            var newRow = "<tr><td id='rowProd" + counter + "'>" + $("#txtProducts").val() + "</td><td id='rowQty" + counter + "'>" + $("#txtQty").val() + "</td><td><input type='button' value='Remove' id='btnRemove" + counter + "' class='remove' /></td></tr>";
            $("#tblProducts").append(newRow);

            $("#tblProducts").on("click", ".remove", function () {
                $(this).closest("tr").remove();
                var rowCount = $("#tblProducts tr").length;
                var removeProd = {revertName: $("#rowProd" + counter).val(), revertQty: $("#rowQty" + counter).val()}
                $.ajax({
                    type: "POST",
                    traditional: true,
                    url: "/Service/JsonRemoveProduct",
                    dataType: "json",
                    data: removeProd,
                    success: function (result) {
                        if (rowCount == 1) {
                            $("#tblProducts").addClass("hide");
                        }
                    }
                });
                $("#productQty").val("");
                $("#autoCompleteText").val("");
            });
        }
    });
});

我一直在尝试该代码，但我得到的只是导致错误的数量的空值。那么如何从所选行中准确获取所选 ProductName 和 Quantity 的数据？

我基本上想得到这样的东西：

var data = { prodName: $("#selectedRowCell1")}

所以我可以将它传递给我的类中的方法并更新数据库。

此外，是否可以获取不同表的当前 ID 并将其插入到另一个表 + 1。这样的事情：

Select id from Details
then
Update Products set detailId = Details.id + 1

? 我知道这不起作用，因为我已经尝试过了。那么这样的事情可能吗？

4

1 回答 1

1

首先，这些应该是单独的点击事件，不要在 ajax 回调中定义点击事件。这就是您使用该on()方法的原因。.on()充当event delegator. 是selector一个static element绑定到文档on page load and not after。这意味着，我们可以将事件绑定到这个父元素，如果作为第二个参数提供，他们的子元素将把事件委托给他们。

 $("#addToDisplay").click(function (event) {
    //nothing to change here, omitted for length
 });

在这里，问题是如何获得productData. .remove根据您的定义，产品数据是单击类元素​​时行中的前两列。我们开始做吧。

$("#tblProducts").on("click", ".remove", function() {
    //when you do the following, you remove the entire row we need
    //lets not do that yet.
    //$(this).closest("tr").remove();

    var $this = $(this); //cachable -- save some performance, reference success

    var col1 = $this.closest('tr').find('#rowProd').text(), // first column
        col2 = $this.closest('tr').find('#rowQty').text(), //second column
        productData = { 'product' : col1, 'quantity' : col2};

    //now productData is properly populated with the values we need.

    $.ajax({
        type: "POST",
        traditional: true,
        url: "/Service/JsonRemoveProduct",
        dataType: "json",
        data: productData,
        success: function(result) {

            //ajax successful, NOW we'll remove the row.      
            $this.closest("tr").remove();

            if ($this.find('tr').length;) {
                $("#tblProducts").addClass("hide");
            }
        }
    });
    $("#txtQty").val("");
    $("#txtProducts").val("");
});​
于 2012-11-13T08:31:06.343 回答