Question

我正在动态地向现有表添加新行，表格的第一列包含Edit＆amp;删除按钮。我面临着两个问题：

无法编辑和删除新添加的行，尝试.live但无法使其正常工作
无法获取新添加的行的记录ID（ajax在添加新行时返回记录）。

代码如下所示：

添加新行：

 <script type="text/javascript">
     $(function() {
         $('#btnSubmit').click(function() {

             var oEmployee = new Object();

             oEmployee.Title        = $("#Title").val();
             oEmployee.Middlename   = $("#MiddleName").val();
             oEmployee.Lastname     = $("#LastName").val();
             oEmployee.Email        = $("#Email").val();

             var DTO =  {'employee': oEmployee};

             var options = {
                 type: "POST",
                 url: "WebService.asmx/InsertEmployee",
                 data: JSON.stringify(DTO),
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function(response) {
                     if (response.d != "") {
                         if (parseInt(response.d) >= 1) {
                             var contactID;
                             contactID = parseInt(response.d);
                             $('#tblEmployee tbody tr:first').after("<tr id=" + contactID + "><td><input type='button' class='newContactID' value='Edit'/>&nbsp;<input type='button' value='Delete'/></td><td align=center>" + contactID + "</td><td align=center>" + oEmployee.Title + "</td><td align=center>" + oEmployee.Middlename + "</td><td align=center>" + oEmployee.Lastname + "</td><td align=center>" + oEmployee.Email + "</td><tr>"); // need to hook up editing and deleting function to the newly added rows  }
                         else {
                             alert("Insert Failed \n" + response.d);
                         }
                     }
                 }
             };
             //Call the webservice
             $.ajax(options);
         });
     });                          
</script>

编辑和删除代码：

$(function() {
    $("#tblEmployee > tbody > tr ").each(function() {
        var TRID = $(this).attr("id");
        $(this).find("td:first > input[value=Edit]").click(function() {
            ResetOtherRowEdit();
            ChangeTableCellToTextbox(TRID);
            $(this).hide();
            $("#tblEmployee > tbody >  tr[id=" + TRID + "] > td:first> input[value=Delete]").hide();
            return false;
        });

        $(this).find("td:first > input[value=Update]").click(function() {
            UpdateRow(TRID);
        });

        $(this).find("td:first > input[value=Delete]").click(function() {
            DeleteRow(TRID);
        });

        $(this).find("td:first > input[value=Cancel]").click(function() {
            CancelEdit(TRID);
        });           
    });
});

最好的方法是什么？编辑和删除记录在从数据库中删除时工作正常。

更新

这就是代码现在的样子，一个月后开始涉足Jquery，仍然试图绕过它。

    $(function() {
        $("#tblEmployee > tbody > tr ").live('click', function(e) {
            var TRID = $(this).attr("id");
            var $target = $(e.target);

            if ($target.is('#btnEdit')) {
                $(this).find("td:first > input[value=Edit]").click(function() {
                    ResetOtherRowEdit();
                    ChangeTableCellToTextbox(TRID);
                    $(this).hide();
                    $("#tblEmployee > tbody >  tr[id=" + TRID + "] > td:first> input[value=Delete]").hide();
                    return false;
                });
            }
            else if ($target.is('#btnUpdate')) {
                $(this).find("td:first > input[value=Update]").click(function() {
                    UpdateRow(TRID);
                });
            }
            else if ($target.is('#btnCancel')) {
                 $(this).find("td:first > input[value=Cancel]").click(function() {
                     CancelEdit(TRID);
                });
            }                
            else if ($target.is('#btnDelete')) {
                $(this).find("td:first > input[value=Delete]").click(function() {
                    DeleteRow(TRID);
                });
            }
        });
    });

HTML代码如下所示：

<ItemTemplate>
  <tr id='<%# Eval("ContactID") %>'>
        <td width="10%">                       
            <input type="button" value="Edit" id="btnEdit"/>
            <input type="button" value="Delete" id="btnDelete"/>
            <input type="button" value="Update" style="display:none" id="btnUpdate" />
            <input type="button" value="Cancel" style="display:none" id="btnCancel"/>
        </td>
        <td width="10%" align="center"><%# Eval("ContactID")%></td>
        <td width="20%" align="center"><%# Eval("Title")%></td>
        <td width="20%" align="center"><%# Eval("MiddleName")%></td>
        <td width="20%" align="center"><%# Eval("LastName")%></td>
        <td width="20%" align="center"><%# Eval("EmailAddress")%></td>
   </tr>   
</ItemTemplate>

Answer 1

您可以利用DOM遍历和.live()来完成这项工作。使用.live()将侦听器添加到表的行中。在此方法中，确定单击了哪个元素（e.currentTarget）。您可以使用简单的条件来检查它是否是需要做出反应的按钮。然后，使用DOM遍历来确定您想要发生的事情。例如，如果e.currentTarget是删除按钮，则可以使用$(this).closest('tr').remove();删除该行。如果您需要通过ajax与数据交互，请使您的ajax函数支持传入您需要的任何值（id）来执行删除。为了获得id，你需要从ajax调用中获取它并将它放在DOM中的某个位置，这样你就可以在需要时检索它。生成tr时，您总是可以投入'title'属性。

Answer 2

这是与php相同的脚本 http://www.amitpatil.me/add-edit-delete-rows-dynamically-using-jquery-php/

    // Add new record
$(document).on("click","."+editbutton,function(){
    var id = $(this).attr("id");
    if(id && editing == 0 && tdediting == 0){
        // hide editing row, for the time being
        $("."+table+" tr:last-child").fadeOut("fast");

        var html;
        html += "<td>"+$("."+table+" tr[id="+id+"] td:first-child").html()+"</td>";
        for(i=0;i<columns.length;i++){
            // fetch value inside the TD and place as VALUE in input field
            var val = $(document).find("."+table+" tr[id="+id+"] td[class='"+columns[i]+"']").html();
            input = createInput(i,val);
            html +='<td>'+input+'</td>';
        }
        html += '<td><a href="javascript:;" id="'+id+'" class="'+updatebutton+'"><img src="'+updateImage+'"></a> <a href="javascript:;" id="'+id+'" class="'+cancelbutton+'"><img src="'+cancelImage+'"></a></td>';

        // Before replacing the TR contents, make a copy so when user clicks on 
        trcopy = $("."+table+" tr[id="+id+"]").html();
        $("."+table+" tr[id="+id+"]").html(html);   

        // set editing flag
        editing = 1;
    }
});

使用Jquery编辑和删除新添加的表行

2 个答案: