Question

如何更新我从表中获取编辑的同一行，因为当我点击编辑按钮时，它会再次使用相应的字段向我提供数据，但是当我编辑数据并单击提交时，它会添加不应发生的新行因为我只是编辑数据而不是添加新行所以请有人帮助我，我会很感激

$(document).ready(function()
{
    var count =1;
    $("#submit_Button").on('click',function()
    {
    if($("#hidden_Id").val() == 0)
    {
        console.log($("#hidden_Id").val());

        var firstName_Field = $("#firstName").val();
        console.log(firstName_Field);
        var lastName_Field = $("#lastName").val();
        console.log(lastName_Field);
        var address = $("#address").val();
        console.log(address);

        if($("#firstName").val() == null ||$("#firstName").val() == "" && $("#lastName").val() == null ||$("#lastName").val() == "" && $("#address").val() == null ||$("#address").val() == "" )
        {
            alert("Please fill the form");
        }
        else
        {

        $("#tbl").append('<tr id="trCount"><td id="count" class="count_Class">'+ count +'</td><td id="fName" class="fname_Class">'+firstName_Field+'</td><td id="lName" class="lName_Class">'+lastName_Field+'</td><td id="addr" class="addr_Class">'+address+'</td><td id="editButton" class="editButton_Class"><input type="button" value="Edit" id="edit_Button" class="edit_Button_Class"></td>');
        count++;

        $("#firstName").val('');
        $("#lastName").val('');
        $("#address").val('');
        }
    }
    else
    {
        var firstName_Field = $("#firstName").val();        
        var lastName_Field = $("#lastName").val();      
        var address = $("#address").val();

        var row_Number = $("#tbl > tbody  >tr >td:first").text();
        alert(row_Number);

        //How do i update this in table with same row
        $("#tbl").append('<tr id="trCount"><td id="count" class="count_Class">'+ count +'</td><td id="fName" class="fname_Class">'+firstName_Field+'</td><td id="lName" class="lName_Class">'+lastName_Field+'</td><td id="addr" class="addr_Class">'+address+'</td><td id="editButton" class="editButton_Class"><input type="button" value="Edit" id="edit_Button" class="edit_Button_Class"></td>');
        count++;

        $("#firstName").val('');
        $("#lastName").val('');
        $("#address").val('');
        $("#hidden_Id").val();
    }

    });


    $(document).on('click','.edit_Button_Class', function()
    {

        var tr = $(this).closest('tr');
        var fname_Field = tr.find(".fname_Class").text();       
        var lname_Field = tr.find(".lName_Class").text();   
        var addre_Field = tr.find(".addr_Class").text();

        $("#firstName").val(fname_Field);
        $("#lastName").val(lname_Field);
        $("#address").val(addre_Field);


        var row_Count = $(this).closest('tr').index()+1;        
        $("#hidden_Id").val(row_Count);

    });

});

</script>
<style>
.myForm{
    margin-left:500px;
    width:auto;
}
#firstName{margin-left: 20px;}
#lastName{margin-left:17px;}
#address{margin-left:33px;}
#submit_Button{margin-left:87px;}
#tbl{margin-left:500px;}
</style>
</head>

<body>
<form name="form" action="" class="myForm">
<table>
<tr>
<td>First Name :<input type="text" id="firstName" /></td>
</tr>
<tr>
<td>Last Name : <input type="text" id="lastName"  /></td>
</tr>
<tr>
<td>Address :   <input type="text" id="address"   /></td>
</tr>
<tr>
<td><input type="hidden" class="hidden_Class" id="hidden_Id" value="" /></td>
</tr>
<td><input type="button" value="Submit" id="submit_Button" />
</table>
</form>
<table id="tbl">
</table>
</body>
</html>

如何更新与我点击提交时相同的行中的数据在jQuery中添加新行

0 个答案: