<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/jquery-3.3.1.min.js">
</script>
<title>Document</title>
</head>
<body>
<button id="add_stu">添加</button>
<input type="text" id="sel_stu">
<button id="select_btn">查询</button>
<table border="1" width="500px">
<tr id="one">
<td>ID</td>
<td>姓名</td>
<td>薪水</td>
<td>操作</td>
</tr>
</table>
</body>
<script>
$(function(){
//添加
$("#add_stu").click(function(){
var id = prompt("请输入ID")
var name = prompt("请输入姓名")
var money = prompt("请输入薪水")
//创建一行
$("<button class='del'>删除</button>")
var $tr = $("<tr><td>"+id+"</td><td>"+name+"</td><td>"+money+
"</td><td><button οnclick='del(this)'>删除</button><button οnclick='edit(this)'>编辑</button></td></tr>")
$("#one").after($tr)
})
})
//删除
function del(obj){
var td = $(obj).parent()
td.parent().remove()
}
//编辑
function edit(obj){
//获取当前按钮的父节点
var td = $(obj).parent()
//获取当前td所有的同辈元素
var tdes = td.siblings();
//获取原来数据的id的值
var id = tdes[0].innerText;
var name = prompt("请输入修改后的姓名")
var money = prompt("请输入修改后的薪水")
var $tr = $("<tr><td>"+id+"</td><td>"+name+"</td><td>"+money+
"</td><td><button οnclick='del(this)'>删除</button><button οnclick='edit(this)'>编辑</button></td></tr>")
//替换
//第一步 先获取当前行
var td = $(obj).parent()
var old_tr = td.parent()
// 替换原来的行tr
old_tr.replaceWith($tr)
}
//根据id查询
$("#select_btn").click(function(){
//第一步 先获取输入查询的内容
var sel_id = $("#sel_stu").val();
//获取所有的tr
var tres = $("#one").nextAll();
//新建数组存储id值
var id_arr=[];
if(sel_id!=""){
tres.each(function(index){
//获取当行的第一列td的值
var td_id = $(this).find("td")[0].innerText
id_arr.push(td_id)//给数组添加元素
});
for(var i =0;i<id_arr.length;i++){
if(sel_id==id_arr[i]){
tres.eq(i).show();
}else{
tres.eq(i).hide();
}
}
}else{
tres.each(function(){
$(this).show()
})
}
})
</script>
</html>
使用jQuery实现动态的增、收、查、改的功能
最新推荐文章于 2024-08-26 20:25:07 发布