jquery個人資料增刪改查-前端問答-PHP中文網

jQuery是一種方便快速的Javascript函式庫，常用於處理HTML文件的互動、事件處理和動畫效果等。本文將介紹如何利用jQuery實現個人資訊的增刪改查功能。

一、準備工作

#首先，需要有一個包含個人資訊的HTML表格，可以手動撰寫或使用範本引擎產生。假設我們的表格包含了以下列頭和資料：

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

登入後複製

其次，需要一個表單用於新增和編輯資訊。可以利用HTML建立表單，例如：

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

登入後複製

其中，id為「info-id」的隱藏域用於記錄正在編輯的資訊的ID，value為空表示目前是新增操作，不為空表示目前是編輯操作。

二、新增資訊

新增資訊的操作比較簡單，只需要監聽表單的submit事件，取得表單資料並插入表格中即可。具體步驟如下：

監聽submit事件：

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

登入後複製

取得表單資料：

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

登入後複製

插入表格中：

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

登入後複製

其中，newId為新新增資訊的ID，需要根據目前表格的最大ID加1產生。

三、編輯資訊

編輯資訊的操作比新增操作稍微複雜一些，需要先在表格中定位需要編輯的信息，然後將其資料填入表單中，並監聽表單的submit事件，完成更新後更新表格中原有的資料。具體步驟如下：

監聽編輯按鈕的click事件：

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

登入後複製

監聽表單的submit事件：

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

登入後複製

其中，利用find、filter和closest方法可以定位到需要編輯的行，並再次利用find方法來取得該行中每一列的資料。

四、刪除資訊

刪除資訊相對簡單，只需要在點擊刪除按鈕時確認是否刪除，並從表格中移除對應的行即可。具體步驟如下：

監聽刪除按鈕的click事件：

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

登入後複製

其中，利用closest方法取得目前行，並利用remove方法將其從DOM樹移除。

到此為止，我們已經完成了個人資訊的增刪改查功能。完整的程式碼範例如下：

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

登入後複製

以上是jquery個人資料增刪改查的詳細內容。更多資訊請關注PHP中文網其他相關文章！