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个人信息增删改查的详细内容，更多请关注编程网其它相关文章！
