<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(function () {
//删除
$(".sc").click(function () {
$(this).parents("tr").remove();
});
//增加
$("a:contains('新增')").click(function(){
var d=$("table tr:eq(2)");
var z=d.clone(true);
$("table").append(z);
});
//查询
$("a:contains('查询')").click(function () {
var key = $("input").val();
$("tr:gt(0)").each(function () {
if ($(this).children("td:eq(1)").
text().trim() == key) {
$(this).show();
} else {
$(this).hide();
}
});
});
//修改
$("a:contains('修改')").click(function(){
var dqtr = $(this).parent().parent();
tds = dqtr.find("td:lt(3)");
tds.each(function(index,el){
$(el).html("<input type='text'value='"+$(el).text()+"'>");
});
td = dqtr.find("td:eq(3)"); //第四列
td.find("a.bc").show();
td.find("a.xg").hide();
});
//保存
$(".bc").click(function(){
var hang = $(this).parent().parent();
var is = hang.find("input");
is.each(function(index,el){
$(el).parent().text($(el).val());
});
$(this).hide();
$(this).siblings(".xg").show();
});
});
</script>
</head>
<body>
<a href="#" id="btn_xinzeng">新增</a>
<input type="text">
<a href="#">查询</a>
<table border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>工资</th>
<th>功能</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>5000</td>
<td>
<a class="bc" href="#" style="display: none;">保存</a>
<a class="xg" href="#">修改</a>
<a class="sc" href="#">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>6000</td>
<td>
<a class="bc" href="#" style="display: none;">保存</a>
<a class="xg" href="#">修改</a>
<a class="sc" href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
标签：function,el,Java,表格,Script,find,var,td,click From： https://blog.csdn.net/2302_76630479/article/details/144094600