Hinzufügen, Löschen und Ändern persönlicher Daten durch jquery

jQuery ist eine praktische und schnelle Javascript-Bibliothek, die häufig zur Handhabung von Interaktionen, Ereignisverarbeitung und Animationseffekten von HTML-Dokumenten verwendet wird. In diesem Artikel wird erläutert, wie Sie mit jQuery die Funktion zum Hinzufügen, Löschen, Ändern und Überprüfen persönlicher Informationen implementieren.

1. Vorbereitung

Zunächst benötigen Sie eine HTML-Tabelle mit persönlichen Informationen, die manuell geschrieben oder mithilfe einer Template-Engine generiert werden kann. Gehen Sie davon aus, dass unsere Tabelle die folgenden Spaltenüberschriften und Daten enthält:

<table id="info-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>25</td>
            <td>138****1234</td>
            <td>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>女</td>
            <td>30</td>
            <td>139****5678</td>
            <td>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            </td>
        </tr>
        ...
    </tbody>
</table>

Zweitens wird ein Formular zum Hinzufügen und Bearbeiten von Informationen benötigt. Sie können HTML verwenden, um ein Formular zu erstellen, zum Beispiel:

<form id="info-form">
    <input type="hidden" id="info-id" value="">
    <div>
        <label for="info-name">姓名：</label>
        <input type="text" id="info-name" name="name" required="required">
    </div>
    <div>
        <label for="info-gender">性别：</label>
        <input type="radio" id="info-gender-male" name="gender" value="male" required="required">
        <label for="info-gender-male">男</label>
        <input type="radio" id="info-gender-female" name="gender" value="female" required="required">
        <label for="info-gender-female">女</label>
    </div>
    <div>
        <label for="info-age">年龄：</label>
        <input type="number" id="info-age" name="age" required="required">
    </div>
    <div>
        <label for="info-phone">联系方式：</label>
        <input type="tel" id="info-phone" name="phone" required="required">
    </div>
    <div>
        <button type="submit" id="submit-btn">提交</button>
        <button type="button" id="cancel-btn">取消</button>
    </div>
</form>

Darunter wird das versteckte Feld mit der ID „info-id“ verwendet, um die ID der bearbeiteten Informationen aufzuzeichnen Wenn es leer ist, bedeutet dies, dass der aktuelle Vorgang hinzugefügt werden soll. Wenn es nicht leer ist, bedeutet dies, dass der aktuelle Vorgang bearbeitet wird.

2. Informationen hinzufügen

Das Hinzufügen von Informationen ist relativ einfach. Sie müssen sich nur das Übermittlungsereignis des Formulars anhören, die Formulardaten abrufen und in dieses einfügen der Tisch. Die spezifischen Schritte sind wie folgt:

1. Abhören des Submit-Ereignisses:

$('#info-form').on('submit', function(e) {
    e.preventDefault();
    // ...
});

2. Formulardaten abrufen: #🎜🎜 #

var formData = {
    name: $('#info-name').val(),
    gender: $('input[name="gender"]:checked').val(),
    age: $('#info-age').val(),
    phone: $('#info-phone').val()
};

In die Tabelle einfügen:

var newRow = $('<tr>')
    .append($('<td>').text(newId))
    .append($('<td>').text(formData.name))
    .append($('<td>').text(formData.gender === 'male' ? '男' : '女'))
    .append($('<td>').text(formData.age))
    .append($('<td>').text(formData.phone))
    .append($('<td>')
        .append($('<button>').addClass('edit-btn').text('编辑'))
        .append($('<button>').addClass('delete-btn').text('删除'))
    );
$('#info-table tbody').append(newRow);

Unter anderem ist newId die ID der neu hinzugefügten Informationen, die generiert werden müssen basierend auf der maximalen ID der aktuellen Tabelle plus 1.

3. Informationen bearbeiten

Das Bearbeiten von Informationen ist etwas komplizierter als das Hinzufügen. Sie müssen zunächst die Informationen finden, die im Formular bearbeitet werden müssen Geben Sie dann die Daten in das Formular ein, hören Sie sich das Submit-Ereignis des Formulars an und aktualisieren Sie die Originaldaten im Formular, nachdem die Aktualisierung abgeschlossen ist. Die spezifischen Schritte sind wie folgt:

Auf das Klickereignis der Schaltfläche „Bearbeiten“ achten:

$('#info-table').on('click', '.edit-btn', function() {
    var row = $(this).closest('tr');
    var id = row.find('td:first-child').text();
    var name = row.find('td:nth-child(2)').text();
    var gender = row.find('td:nth-child(3)').text() === '男' ? 'male' : 'female';
    var age = row.find('td:nth-child(4)').text();
    var phone = row.find('td:nth-child(5)').text();
    $('#info-id').val(id);
    $('#info-name').val(name);
    $('input[name="gender"][value="' + gender + '"]').prop('checked', true);
    $('#info-age').val(age);
    $('#info-phone').val(phone);
    $('#submit-btn').text('更新');
});

Auf das Senden warten Ereignis der Form:

$('#info-form').on('submit', function(e) {
    e.preventDefault();
    var id = $('#info-id').val();
    var formData = {
        name: $('#info-name').val(),
        gender: $('input[name="gender"]:checked').val(),
        age: $('#info-age').val(),
        phone: $('#info-phone').val()
    };
    var row = $('#info-table').find('td:first-child').filter(function() {
        return $(this).text() === id;
    }).closest('tr');
    row.find('td:nth-child(2)').text(formData.name);
    row.find('td:nth-child(3)').text(formData.gender === 'male' ? '男' : '女');
    row.find('td:nth-child(4)').text(formData.age);
    row.find('td:nth-child(5)').text(formData.phone);
    $('#info-id').val('');
    $('#info-name').val('');
    $('input[name="gender"]').prop('checked', false);
    $('#info-age').val('');
    $('#info-phone').val('');
    $('#submit-btn').text('添加');
});

Unter diesen können die Methoden „Suchen“, „Filter“ und „Nächste“ verwendet werden, um die Zeile zu finden, die bearbeitet werden muss, und die Methode „Suchen“ kann erneut verwendet werden Erhalten Sie die Daten jeder Spalte in der Zeile.

4. Informationen löschen

Das Löschen von Informationen ist relativ einfach. Sie müssen nur bestätigen, ob sie gelöscht werden sollen, wenn Sie auf die Schaltfläche „Löschen“ klicken, und die entsprechende Zeile aus der Tabelle entfernen. Die spezifischen Schritte lauten wie folgt:

Hören Sie sich das Klickereignis der Löschschaltfläche an:

$('#info-table').on('click', '.delete-btn', function() {
    var row = $(this).closest('tr');
    if (confirm('确定要删除该信息吗？')) {
        row.remove();
    }
});

Verwenden Sie unter diesen die Methode, die am nächsten kommt Holen Sie sich die aktuelle Zeile und verwenden Sie die Remove-Methode, um die aktuelle Zeile abzurufen. Sie wird aus dem DOM-Baum entfernt.

Bisher haben wir die Funktion zum Hinzufügen, Löschen, Ändern und Überprüfen persönlicher Daten abgeschlossen. Das vollständige Codebeispiel lautet wie folgt:

$(function() {
    $('#info-table').on('click', '.edit-btn', function() {
        var row = $(this).closest('tr');
        var id = row.find('td:first-child').text();
        var name = row.find('td:nth-child(2)').text();
        var gender = row.find('td:nth-child(3)').text() === '男' ? 'male' : 'female';
        var age = row.find('td:nth-child(4)').text();
        var phone = row.find('td:nth-child(5)').text();
        $('#info-id').val(id);
        $('#info-name').val(name);
        $('input[name="gender"][value="' + gender + '"]').prop('checked', true);
        $('#info-age').val(age);
        $('#info-phone').val(phone);
        $('#submit-btn').text('更新');
    });
    
    $('#info-form').on('submit', function(e) {
        e.preventDefault();
        var id = $('#info-id').val();
        var formData = {
            name: $('#info-name').val(),
            gender: $('input[name="gender"]:checked').val(),
            age: $('#info-age').val(),
            phone: $('#info-phone').val()
        };
        if (id === '') {
            var newId = parseInt($('#info-table').find('td:first-child')
                .map(function() { return $(this).text(); }).get()
                .reduce(function(prev, curr) { return parseInt(prev) > parseInt(curr) ? prev : curr; })) + 1;
            var newRow = $('<tr>')
                .append($('<td>').text(newId))
                .append($('<td>').text(formData.name))
                .append($('<td>').text(formData.gender === 'male' ? '男' : '女'))
                .append($('<td>').text(formData.age))
                .append($('<td>').text(formData.phone))
                .append($('<td>')
                    .append($('<button>').addClass('edit-btn').text('编辑'))
                    .append($('<button>').addClass('delete-btn').text('删除'))
                );
            $('#info-table tbody').append(newRow);
        } else {
            var row = $('#info-table').find('td:first-child').filter(function() {
                return $(this).text() === id;
            }).closest('tr');
            row.find('td:nth-child(2)').text(formData.name);
            row.find('td:nth-child(3)').text(formData.gender === 'male' ? '男' : '女');
            row.find('td:nth-child(4)').text(formData.age);
            row.find('td:nth-child(5)').text(formData.phone);
            $('#info-id').val('');
            $('#info-name').val('');
            $('input[name="gender"]').prop('checked', false);
            $('#info-age').val('');
            $('#info-phone').val('');
            $('#submit-btn').text('添加');
        }
    });
    
    $('#info-table').on('click', '.delete-btn', function() {
        var row = $(this).closest('tr');
        if (confirm('确定要删除该信息吗？')) {
            row.remove();
        }
    });
    
    $('#cancel-btn').on('click', function() {
        $('#info-id').val('');
        $('#info-name').val('');
        $('input[name="gender"]').prop('checked', false);
        $('#info-age').val('');
        $('#info-phone').val('');
        $('#submit-btn').text('添加');
    });
});

Das obige ist der detaillierte Inhalt vonHinzufügen, Löschen und Ändern persönlicher Daten durch jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!