Question

当我点击第一行数据并编辑其中的某些内容并再次尝试提交时，它会添加新行。它不会更新从我获取该数据的同一行。好像我尝试编辑任何其他行，除了他们正在更新成功，请帮助我。

<html>
    <head>
        <script>
            var count = 1;
            $(document).ready(function () {
                $("#form").on('click', "#submit_Button", function (event) {
                    var fname = $("#firstName").val();
                    var lname = $("#lastName").val();
                    var addr = $("#address").val();
                    var mail = $("#emailAddress").val();
                    var hidden = $("#hidden_Id").val();
                    var tble = $("#tbl");

                    if (fname == "" && lname == "" && addr == "" && mail == "") {
                        alert("Please Fill All Fields");
                    }
                    else {
                        if (hidden > 0) {
                            //for edit row
                            var rowObj = $(tble[0].rows[hidden]);
                            rowObj.find('.fname').html(fname);
                            rowObj.find('.lname').html(lname);
                            rowObj.find('.addr').html(addr);
                            rowObj.find('.mail').html(mail);
                            $("#firstName").val('');
                            $("#lastName").val('');
                            $("#address").val('');
                            $("#emailAddress").val('');
                            $("#hidden_Id").val('0');
                        }
                        else {
                            //new row addition
                            var rowLen = tble[0].rows.length;
                            var newRow = tble[0].insertRow(rowLen);
                            var firstCell = newRow.insertCell(0);
                            var secondCell = newRow.insertCell(1);
                            var thirdCell = newRow.insertCell(2);
                            var fourthCell = newRow.insertCell(3);
                            var fifthCell = newRow.insertCell(4);
                            var sixthCell = newRow.insertCell(5);
                            firstCell.setAttribute("class", "count");
                            secondCell.setAttribute("class", "fname");
                            thirdCell.setAttribute("class", "lname");
                            fourthCell.setAttribute("class", "addr");
                            fifthCell.setAttribute("class", "mail");
                            sixthCell.innerHTML = '<input type="button" class="edit" value="edit"/>';
                            firstCell.innerHTML = count;
                            secondCell.innerHTML = fname;
                            thirdCell.innerHTML = lname;
                            fourthCell.innerHTML = addr;
                            fifthCell.innerHTML = mail;
                            $("#firstName").val('');
                            $("#lastName").val('');
                            $("#address").val('');
                            $("#emailAddress").val('');
                            count++;
                        }
                    }
                    event.preventDefault();
                    event.stopPropagation();
                });
                $(".info_Table").delegate('.edit', 'click', function (event) {
                    var obj = $(this);
                    var row = obj.parent().parent();
                    var tdFname = row.find('.fname').html();
                    var tdLname = row.find('.lname').html();
                    var tdAddr = row.find('.addr').html();
                    var tdMail = row.find('.mail').html();
                    $("#firstName").val(tdFname);
                    $("#lastName").val(tdLname);
                    $("#address").val(tdAddr);
                    $("#emailAddress").val(tdMail);
                    $("#hidden_Id").val(row.index());
                });
            });
        </script>
        <style>
            .myForm {
                margin-left: 285px;
                width: 775px;
                background-color: #000;
                color: #0C0;
            }

            .name {
                padding-left: 228px;
            }

            #firstName {
                margin-left: 20px;
            }

            #lastName {
                margin-left: 17px;
            }

            #address {
                margin-left: 33px;
            }

            #submit_Button {
                margin-left: 350px;
                margin-top: 20px;
            }

            #emailAddress {
                margin-left: 51px;
            }

            #tbl {
                margin-left: 285px;
                width: 775px;
                background-color: #000;
                color: #0C0;
                border: 1px solid #0C0;
                text-align: center;
            }

            #count {
                width: 25px;
                border: 1px solid red;
                position: absolute;
                margin-left: 21px;
            }

            #fName {
                width: 117px;
                border: 1px solid red;
                position: absolute;
                margin-left: 78px;
            }

            #lName {
                width: 117px;
                border: 1px solid red;
                position: absolute;
                margin-left: 212px;
            }

            #addr {
                width: 165px;
                border: 1px solid red;
                position: absolute;
                margin-left: 346px;
            }

            #email_Id {
                width: 153px;
                border: 1px solid red;
                position: absolute;
                margin-left: 528px;
            }

            #edit_Button {
                border: 1px solid red;
                margin-left: 694px;
            }

            .div {
                background-color: #000;
                color: #0C0;
                width: 775px;
                margin-left: 285px;
            }

            #tbl_Count {
                width: 30px;
                margin-left: 22px;
            }

            #tbl_FName {
                width: 80px;
                margin-left: 46px;
            }

            #tbl_LName {
                width: 80px;
                margin-left: 65px;
            }

            #tbl_Addr {
                width: 80px;
                margin-left: 100px;
            }

            #tbl_Edit {
                width: 78px;
                margin-left: 71px;
            }

            #tbl_Email {
                margin-left: 121px;
            }
        </style>
    </head>
    <body>
        <form name="form" action="" id="form" class="myForm">
            <table>
                <tr>
                    <td class="name">First Name :<input type="text" id="firstName" /></td>
                </tr>
                <tr>
                    <td class="name">Last Name : <input type="text" id="lastName" /></td>
                </tr>
                <tr>
                    <td class="name">Address :   <input type="text" id="address" /></td>
                </tr>
                <tr>
                    <td class="name">Email :   <input type="text" id="emailAddress" /></td>
                </tr>
                <tr>
                    <td><input type="hidden" class="hidden_Class" id="hidden_Id" value="0" /></td>
                </tr>
                <td><input type="button" value="Submit" id="submit_Button" />
            </table>
        </form>
        <div class="div">
            <span id="tbl_Count"> Index       </span>
            <span id="tbl_FName"> First Name  </span>
            <span id="tbl_LName"> Last Name   </span>
            <span id="tbl_Addr">  Address     </span>
            <span id="tbl_Email"> Email       </span>
            <span id="tbl_Edit">  Edit Option </span>
        </div>
        <table id="tbl" class="info_Table"></table>
    </body>
</html>

Answer 1

问题仅在您尝试编辑第一行时出现问题，因为row.index()等于0，然后条件if (hidden > 0)始终为false结束编辑。

查看您的更新代码：https://jsfiddle.net/nu71x24m/

我默认将ID设置为-1：

<td><input type="hidden" class="hidden_Class" id="hidden_Id" value="-1" /></td>

并将条件更新为：

if (hidden >= 0) {

无法编辑表格中的第一行

1 个答案: