jquery个人信息增删改查

jquery是一种方便快捷的javascript库，常用于处理html文档的交互、事件处理和动画效果等。本文将介绍如何利用jquery实现个人信息的增删改查功能。

一、准备工作

首先，需要有一个包含个人信息的HTML表格，可以手动编写或者使用模板引擎生成。假设我们的表格包含了以下列头和数据：

        ...
    

    

        

            
ID
            
姓名
            
性别
            
年龄
            
联系方式
            
操作
        
    
    

        

            
1
            
张三
            
男
            
25
            
138****1234
            

                编辑
                删除
            
        
        

            
2
            
李四
            
女
            
30
            
139****5678
            

                编辑
                删除
            
        

其次，需要一个表单用于添加和编辑信息。可以利用HTML构建表单，例如：

    
    

        姓名：
        
    
    

        性别：
        
        男
        
        女
    
    

        年龄：
        
    
    

        联系方式：
        
    
    

        提交
        取消
    

其中，id为“info-id”的隐藏域用于记录正在编辑的信息的ID，value为空表示当前是添加操作，不为空表示当前是编辑操作。

二、添加信息

添加信息的操作比较简单，只需要监听表单的submit事件，获取表单数据并插入表格中即可。具体步骤如下：

1. 监听submit事件：

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

2. 获取表单数据：

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

3. 插入表格中：

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

其中，newId为新添加信息的ID，需要根据当前表格的最大ID加1生成。

三、编辑信息

睿拓智能网站系统-网上商城

睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产

下载

编辑信息的操作比添加操作稍微复杂一些，需要先在表格中定位需要编辑的信息，然后将其数据填充至表单中，并监听表单的submit事件，完成更新后更新表格中原有的数据。具体步骤如下：

1. 监听编辑按钮的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('更新');
});

2. 监听表单的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方法获取该行中每一列的数据。

四、删除信息

删除信息相对简单，只需要在点击删除按钮时确认是否删除，并从表格中移除对应的行即可。具体步骤如下：

1. 监听删除按钮的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 = $('')
                .append($('').text(newId))
                .append($('').text(formData.name))
                .append($('').text(formData.gender === 'male' ? '男' : '女'))
                .append($('').text(formData.age))
                .append($('').text(formData.phone))
                .append($('')
                    .append($('').addClass('edit-btn').text('编辑'))
                    .append($('').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('添加');
    });
});