<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.7.0.min.js"></script>
<style>
body {
text-align: center;
}
form {
display: none;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10" style="width: 100%;">
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
<th>编辑</th>
<th>删除</th>
</tr>
</table>
<p>
<input type="button" value="新增" id="add" />
</p>
<form>
<p>
<label>姓名：<input id="name"></label>
</p>
<p>
<label>爱好：<input id="hobby"></label>
</p>
<p>
<input type="button" value="确定" id="ok">
<input type="button" value="取消" id="cannel">
</p>
</form>
<script>
$(function() {
let modifyTr = null; //修改行
//新增按钮点击事件
$("#add").click(function() {
$("form").show(); //显示
modifyTr = null;
})
//确定按钮点击事件
$("#ok").click(function() {
let name = $("#name").val();
let hobby = $("#hobby").val();
if (name == "" || hobby == "") {
alert("姓名或者爱好不能为空！！！")
return;
}
if (modifyTr == null) {
//新增一行
let tr = $("<tr>");
//取序号
let seq = 1; //默认序号1
if ($("tr").length != 1) {
let n = $("tr:last>td:first").text();
seq = parseInt(n) + 1;
}
//序号td
tr.append($("<td>").text(seq));
//姓名td
tr.append($("<td>").text(name));
//爱好td
tr.append($("<td>").text(hobby));
//编辑td
tr.append($("<td>").html("<a class='update' href='#'>编辑</a>"));
//删除td
tr.append($("<td>").html("<a class='delete' href='#'>删除</a>"));
$("table").append(tr);
//清空表单
$("form")[0].reset();
} else {
//修改
modifyTr.find("td:eq(1)").text($("#name").val());
modifyTr.find("td:eq(2)").text($("#hobby").val());
//清空表单
$("form")[0].reset(); //reset 重置
$("form").hide(); //hide 隐藏
}
})
//编辑按钮点击事件
$("table").on('click', '.update', function() {
modifyTr = $(this).parent().parent();
$('from').show(); //显示
//取得当前行的姓名和爱好
let hobby = $(this).parent().prev().text();
let name = $(this).parent().prev().prev().text();
// 给form表单的输入框赋值
$("#name").val(name);
$("#hobby").val(hobby)
})
//、删除按钮点击事件
$("table").on('click','.delete',function(){
$(this).parent().parent().remove();
})
//取消按钮点击事件
$("#cannel").click(function() {
$('form').hide(); //隐藏
})
})
</script>
</body>
</html>导入文件
jquery-3.7.0.min.js
