penambahan maklumat peribadi jquery, pemadaman, semakan pengubahsuaian-Soal Jawab bahagian hadapan-php.cn

jQuery ialah perpustakaan Javascript yang mudah dan pantas yang sering digunakan untuk mengendalikan interaksi, pemprosesan acara dan kesan animasi dokumen HTML. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi menambah, memadam, mengubah suai dan menyemak maklumat peribadi.

1. Persediaan

Pertama, anda memerlukan jadual HTML yang mengandungi maklumat peribadi, yang boleh ditulis secara manual atau dijana menggunakan enjin templat. Katakan jadual kami mengandungi pengepala lajur dan data berikut:

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

Salin selepas log masuk

Kedua, borang diperlukan untuk menambah dan mengedit maklumat. Anda boleh menggunakan HTML untuk membina borang, contohnya:

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

Salin selepas log masuk

Antaranya, medan tersembunyi dengan id "info-id" digunakan untuk merekodkan ID maklumat yang sedang diedit Jika nilainya kosong , ini bermakna bahawa operasi semasa adalah untuk menambah, dan jika ia tidak kosong, ini bermakna Ini pada masa ini operasi pengeditan.

2. Menambah maklumat

Kendalian menambah maklumat adalah agak mudah Anda hanya perlu mendengar acara penyerahan borang, mendapatkan data borang dan memasukkannya ke dalam jadual. Langkah-langkah khusus adalah seperti berikut:

Dengar acara serahan:

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

Salin selepas log masuk

Dapatkan data borang:

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

Salin selepas log masuk

Masukkan ke dalam jadual :

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);

Salin selepas log masuk

Antaranya, newId ialah ID maklumat yang baru ditambah, yang perlu dijana berdasarkan ID maksimum jadual semasa ditambah 1.

3. Edit maklumat

Kendalian menyunting maklumat adalah lebih rumit sedikit daripada operasi menambah Anda perlu terlebih dahulu mencari maklumat yang hendak diedit dalam jadual, kemudian isikan datanya ke dalam borang, dan memantau borang Acara serah akan mengemas kini data asal dalam jadual selepas kemas kini selesai. Langkah-langkah khusus adalah seperti berikut:

Dengar acara klik butang edit:

$('#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('更新');
});

Salin selepas log masuk

Dengar acara serah borang:

$('#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('添加');
});

Salin selepas log masuk

di mana , gunakan kaedah cari, penapis dan terdekat untuk mencari baris yang perlu diedit dan gunakan kaedah cari sekali lagi untuk mendapatkan data bagi setiap lajur dalam baris.

4. Memadam maklumat

Memadam maklumat adalah agak mudah. Anda hanya perlu mengesahkan sama ada untuk memadamkannya apabila mengklik butang padam dan mengalih keluar baris yang sepadan daripada jadual. Langkah-langkah khusus adalah seperti berikut:

Dengar acara klik butang padam:

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

Salin selepas log masuk

Antaranya, gunakan kaedah terdekat untuk mendapatkan baris semasa, dan gunakan kaedah alih keluar untuk mengalihkannya daripada pokok DOM alih keluar.

Setakat ini, kami telah menyelesaikan fungsi menambah, memadam, mengubah suai dan menyemak maklumat peribadi. Contoh kod lengkap adalah seperti berikut:

$(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('添加');
    });
});

Salin selepas log masuk

Atas ialah kandungan terperinci penambahan maklumat peribadi jquery, pemadaman, semakan pengubahsuaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!