Как удалить конкретный объект из массива jquery со своей строкой в ​​таблице?

У меня есть форма. Когда я нажимаю кнопку «Отправить», я создаю объект с элементами формы. А затем я помещаю эти объекты в массив.

Что я хочу сделать, так это удалить соответствующий объект из этого массива и его строку из таблицы, когда я нажимаю кнопку удаления. А также обновить этот объект при нажатии кнопки обновления. Как я могу это сделать?

индексная страница:

<!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>

основной.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('');

arrays object html jquery html-table
person Furkan    schedule 19.02.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

есть дубликат идентификатора (#deleteButton).
Кнопка редактирования идентификатора по классу. Новая функция:

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
});
}
person Akremi Mourad    schedule 19.02.2017
comment
большое спасибо это сработало. Но как я могу также удалить из массива? - person Furkan; 19.02.2017

arrow_upward
0
arrow_downward

Вот полное решение

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('');
person Pramod Patil    schedule 19.02.2017
comment
что-то не так с функцией нажатия кнопки удаления console.log(personArray). - person Furkan; 19.02.2017