如何从 jquery 数组中删除特定对象及其在表中的行？答案

【问题标题】：How to remove a specific object from jquery array with its row in a table?如何从 jquery 数组中删除特定对象及其在表中的行？
【发布时间】：2017-07-08 20:29:46
【问题描述】：

我有一个表格。当我单击提交按钮时，我创建了一个带有表单元素的对象。然后我将这些对象推送到一个数组中。

当我单击删除按钮时，我想要做的是从该数组中删除相关对象及其从表中的行。并在单击更新按钮时更新该对象。我该怎么做？

索引页面：

<!DOCTYPE html>

<html>
    <head>
        <title>Person Record</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    </head>
    <body>
        <form id="personForm">
            <div>
                <label for="firstname">Firstname:</label>
                <input type="text" id="firstname" name="firstname" value="" placeholder="Firstname"/>
            </div>
            <div>
                <label for="lastname">Lastname:</label>
                <input type="text" id="lastname" name="lastname" value="" placeholder="Lastname"/>
            </div>
            <div>
                <label for="tc">TC:</label>
                <input type="tel" id="tc" name="tc" value="" placeholder="TC"/>
            </div>
            <div>
                <label for="birthday">Birthday:</label>
                <input type="date" id="birthday" name="birthday" />
            </div>
            <div>
                <input type="button" value="Submit" id="submitButton" />
            </div>
        </form>

        <div id="table">
            <h3>People List</h3>
            <table id="personTable" border="1">
                <thead>
                    <tr>
                        <th> Firstname</th>
                        <th> Lastname</th>
                        <th> TC </th>
                        <th> Birthday </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

main.js：

var obj = {};
var data, i;
var personArray = [];

$("#submitButton").click(function () {
    addButton();
    addTable();
});

function addButton() {
    data = $('#personForm').serializeArray();
    for (i = 0; i < data.length; i++) {
        obj[data[i].name] = data[i].value;
    }
    personArray.push(obj);
}

function addTable() {
    if (personArray.length > 0) {
        $('table#personTable tbody').append('<tr><td>' + obj['firstname'] + '</td><td>' + obj['lastname'] + '</td><td>' + obj['tc'] + '</td><td>' + obj['birthday'] + '</td><td><button id="deleteButton">Delete</button></td><td><button id="updateButton">Update</button></td></tr>');
    }
    $("#deleteButton").click(function () {
        $(this).parent().parent().remove(); //Only deletes first row! I want to delete relative row an object
    });
}
$("#firstname").val('');
$("#lastname").val('');
$("#tc").val('');
$("#birthday").val('');

【问题讨论】：

标签： jquery html arrays object html-table

【解决方案1】：

有一个重复的“id”（#deleteButton）。
按类编辑 id 按钮。新功能是：

function addTable() {
if (personArray.length > 0) {
    $('table#personTable tbody').append('<tr><td>' + obj['firstname'] + '</td><td>' + obj['lastname'] + '</td><td>' + obj['tc'] + '</td><td>' + obj['birthday'] + '</td><td><button class="deleteButton">Delete</button></td><td><button id="updateButton">Update</button></td></tr>');
}
$(".deleteButton").click(function () {
    $(this).parent().parent('tr').remove(); //Only deletes first row! I want to delete relative row an object
});
}

【讨论】：

非常感谢它的工作。但是我怎样才能从数组中删除呢？

【解决方案2】：

这里是完整的解决方案

var obj = {};
var data, i;
var personArray = [];

$("#submitButton").click(function () {
    addButton();
    addTable();
});

function addButton() {
    data = $('#personForm').serializeArray();
    for (i = 0; i < data.length; i++) {
        obj[data[i].name] = data[i].value;
    }
    personArray.push(obj);
}

function addTable() {
    if (personArray.length > 0) {
        $('table#personTable tbody').append('<tr><td>' + obj['firstname'] + '</td><td>' + obj['lastname'] + '</td><td>' + obj['tc'] + '</td><td>' + obj['birthday'] + '</td><td><button class="deleteButton" id="deleteRow-'+personArray.length+'">Delete</button></td><td><button id="updateButton">Update</button></td></tr>');
    }
    $(".deleteButton").click(function () {
        var id = $(this).attr('id');
        $("#"+id).parent().parent('tr').remove(); //Only deletes first row! I want to delete relative row an object
        var ind = id.split('-');
        personArray.splice(ind[1]-1,1);
    });
}
$("#firstname").val('');
$("#lastname").val('');
$("#tc").val('');
$("#birthday").val('');

【讨论】：

console.log(personArray) 删除按钮点击功能有问题。