需求：

• 下面输入框输入数据，点击增加按钮，将数据添加至表格末尾，id实现自增
• 在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示
• 点击删除超链接，删除对应的行
• 点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除

运行结果

HTML代码：

<input type="text" />
		<input type="button" value="查询" id="select" />
		<table border="1" style="margin: 20px 0px;">
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>19</td>
				<td>
					<a href="#" style="display: none;" class="save">保存</a>
					<a href="#" class="update">修改</a> <a href="#" class="del">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>李思</td>
				<td>19</td>
				<td><a href="#" style="display: none;" class="save">保存</a>
					<a href="#" class="update">修改</a> <a href="#" class="del">删除</a></td>
			</tr>
		</table>
		<input type="text" />
		<input type="text" />
		<input type="button" value="增加" id="insert" />

 JavaScript代码：

//页面加载完成
			$(function(){
				// 删除
				$(document).on('click','.del',function(){
                    // 判断是否删除
					if(confirm("是否确认删除")){
                        // 找到行tr进行删除
						$(this).parent().parent().remove();
					};
				})
				// 增加
				$("#insert").click(function(){
					// 找到表格中的id
					var id = parseInt($("table tr:last td:first").html());
					// 对id加1
					id+=1;
					// 获取姓名的输入框
					var name = $(this).prev().prev().val();
					// 获取年龄的输入框
					var age = $(this).prev().val();
					// 判断输入的名字和年龄不为空
					if (name!=""&&age!=""){
						// 创建行，拼接
						var trs = "<tr><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td><a href='#' style='display: none;' class='save'>保存</a><a href='#' class='update'>修改</a> <a href='#' class='del'>删除</a></td></tr>";
						// 把行添加到表格table的最后面
						$("table").append(trs);
						// 添加完成后，给姓名，年龄的输入框清空
						$(this).prev().prev().val("");
						$(this).prev().val("");
					}
				})
				// 查询
				$("#select").click(function(){
					// 获取输入框的值
					var input = $(this).prev().val();
					// 对table里面行tr下标大于0的数据进行遍历
					$("table tr:gt(0)").each(function(){
						// 找到tr下面td下标等于1的数据
						var name = $(this).find("td:eq(1)").html();
						// 判断td下标等于1的数据里面是否包含输入框的值
						if(name.indexOf(input)==-1){
							$(this).hide();//数据隐藏
						} else {
							$(this).show();//数据显示
						}
					})
				})
				// 修改
				$(document).on('click','.update',function(){
					$(this).hide();// 把修改按钮隐藏
					$(this).prev().show();// 把保存按钮显示
					// 找到下标小于3的td
					var tds = $(this).parent().parent().find("td:lt(3)");
					// 把下标小于3的td遍历
					$(tds).each(function() {
						// 设置成输入框
						var input = "<input type='text' value=' " + $(this).html() + " ' />"
						// 把表格里面的数据变成输入框
						$(this).html(input);
					});

					$(document).on('click','.save',function(){
						//校验数据是否输入完整
						//找到前面的td标签，数据列前三列
						var tds = $(this).parent().parent().find("td:lt(3) input")
						var flag = true; //表示验证结果
						//遍历td变成input输入框
						$(tds).each(function() {
							if($(this).val() == '') {
								flag = false; //数据没有输入完整
							}
						})

						if(!flag) {
							alert("数据不能为空")
							return;
						}
						//遍历td
						$(tds).each(function() {
							$(this).parent().html($(this).val());
						})
						 
						//隐藏保存按钮
						$(this).hide()
						//显示修改按钮 
						$(this).next().show()

					})
				})
				
			})