随着web应用的普及，对于客户端的响应更加及时的要求越来越高，简单的页面交互已经无法满足大众的需求。这时，jquery这个javascript库就应运而生。在多数情况下，如果需要在页面中进行数据的增删改查等操作，jquery是一种非常便捷的选择。下面我们就来讨论如何使用jquery实现增删改查功能。

一、页面准备工作

在HTML页面上，需要先准备好增删改查所需要的元素，如下所示：

    
    
    
    
    



    
jQuery增删改查

    

        名称：
        

        年龄：
        

        添加
    

    

        

            
ID
            
名称
            
年龄
            
操作
        
    

其中，包含了表单元素和数据表格，以及jQuery的引用和自定义的JavaScript文件。

二、添加数据

使用jQuery添加数据时，需要在HTML页面中定义一个表单并加上提交按钮。并在JavaScript中（通常为jQuery_method.js）编写事件监听器，以获取表单的数据并将其添加到表格中。代码如下所示：

$(document).ready(function () {
    // 监听添加操作
    $('#add_btn').on('click', function (e) {
        e.preventDefault();     // 阻止表单默认提交行为
        const name = $('#add_name').val();
        const age = $('#add_age').val();
        addData(name, age);
    });
});

function addData(name, age) {
    // 构造表格行
    const tr = $('');
    tr.append(``)
        .append(`${name}`)
        .append(`${age}`);
    // 构造表格行中的操作列
    const td = $('');
    const btn_update = $('修改');
    const btn_delete = $('删除');
    btn_update.on('click', function () {
        updateData(name);
    });
    btn_delete.on('click', function () {
        deleteData(name);
    });
    td.append(btn_update).append(btn_delete);
    tr.append(td);
    // 添加到表格中
    $('#table').append(tr);

    // 分配ID
    const id = $('#table tr').length;
    $(`#id_${name}`).html(id);
}

以上代码中，我们使用jQuery监听表单的提交按钮，获取表单中输入的数据，并使用在最后一个td元素中添加了两个button元素，一个用于修改数据，一个用于删除数据。函数addData()用于将数据添加到表格中，并给每行数据分配一个ID。

三、查询数据

查询数据可以直接操作表格元素来实现。以查询某个姓名为例：

function queryData(name) {
    const tr = $(`#table tr td:nth-child(2):contains(${name})`).parent();
    return tr;
}

以上代码中，我们使用jQuery的选择器语法，选择所有包含指定姓名的所有行数据，并通过.parent()方法返回其所在的tr元素。

jQuery实现表格数据增、删、改、查

jQuery实现表格数据增、删、改、查

下载

四、修改数据

要修改数据，首先需要查询需要修改的数据，接着将其展示在一个模态框上（通常为一个表单），等待用户输入需要修改的值和提交修改的数据。在添加关闭模态框的事件监听器后，根据用户输入的值，在表格中更新数据。代码如下所示：

function updateData(name) {
    const tr = queryData(name);
    const old_name = tr.find('td').eq(1).text();
    const old_age = tr.find('td').eq(2).text();
    const $form_update = $(`
            

                名称：
                

                年龄：
                

                修改
                关闭
            
        `);
    $('#table').after($form_update);

    $form_update.on('submit', function (e) {
        e.preventDefault();
        const new_name = $('#update_name').val();
        const new_age = $('#update_age').val();
        tr.find('td').eq(1).text(new_name);
        tr.find('td').eq(2).text(new_age);
        tr.attr('id', `id_${new_name}`);
        $form_update.remove();
    });
    $('#close_btn').on('click', function () {
        $form_update.remove();
    });
}

以上代码中，我们使用jQuery选择器语法，选择需要修改的数据，并给其分配一个ID。然后通过弹出模态框的方式，将需要修改的数据展示给用户，让用户进行修改。修改完毕后，重新使用jQuery查找该行，并更新表格中的数据。对于关闭按钮的操作，也是通过关闭模态框的方式实现。

五、删除数据

对于删除数据，还是需要通过模态框的方式，将需要删除的数据展示给用户，接着监听删除按钮上的点击事件，并在表格中删除该行。代码如下所示：

function deleteData(name) {
    const tr = queryData(name);
    const $form_delete = $(`
            

                
                    您确定要删除名称为 ${name} 的数据吗？
                
                确定
                取消
            
        `);
    $('#table').after($form_delete);

    $form_delete.on('submit', function (e) {
        e.preventDefault();
        tr.remove();
        $form_delete.remove();
    });
    $('#close_btn').on('click', function () {
        $form_delete.remove();
    });
}

以上代码中，我们使用jQuery的选择器语法，选择需要删除的数据，并通过弹出模态框的方式将需要删除的数据展示给用户。在用户点击了确定后，将该行数据从表格中删除。对于取消按钮的操作，依然是关闭模态框。

六、总结

通过以上代码，我们可以发现，使用jQuery实现增删改查非常容易。在页面准备工作完成后，使用jQuery的选择器语法即可选择需要操作的DOM元素，并使用jQuery的事件监听器来处理对应的事件。同时，jQuery的简洁代码也带来了很大的便利。在不需要涉及复杂逻辑的增删改查功能上，使用jQuery是一种非常不错的选择。