要求
实现只删除该行数据，不影响其他行的数据
删除函数如下
function delElement(i) {
$('#i').parent().remove();
// 删除操作代码
// alert('删除功能尚未实现！');
}
本来是想通过id查找实现的但是实现不了，不知道哪里错了（ε(┬┬﹏┬┬)3）
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信息管理系统框架</title>
<style>
.del {
color: red;
}
</style>
</head>
<body>
<input type="button" value="点击添加成员" onclick="addElement()">
姓名： <input type="text" placeholder="请输入成员姓名" id="name">
学号： <input type="text" placeholder="请输入成员学号" id="num">
年龄： <input type="text" placeholder="请输入成员年龄" id="age">
<table border="1">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>学号</td>
<td>年龄</td>
<td>删除成员</td>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
<script src="E:\大一\暑假\html web\bootstrap-3.4.1-dist\js\jquery-3.7.1.js"></script>
<!-- jquery的框架可以自己下载引入,官网如下https://jquery.com/ -->
<script type="text/javascript">
stu = {
id: 0,
name: '',
num: 0,
age: 0
}
var i = 1;
function addElement() {
var nameValue = $("#name").val();
var numValue = $("#num").val();
var ageValue = $("#age").val();
// console.log(nameValue)
if (nameValue && numValue && ageValue) {
stu.id = i, stu.name = nameValue, stu.num = numValue, stu.age = ageValue;
var tr = $('<tr>');
for (var key in stu) {
var text = stu[key];
var td = $('<td>').text(text);
tr.append(td);
}
// 添加删除按钮
var delTd = $('<td>');
var delButton = $('<input>').attr({
type: 'button',
value: '点击删除',
onclick: "delElement(" + i + ")"
});
delButton.addClass('del');
delButton.appendTo(delTd);
delTd.appendTo(tr);
// 添加到tbody
var bodyTag = $('#body');
bodyTag.append(tr);
// 更新序号
i++;
}
else
alert('未读取到成员信息，添加失败！');
}
function delElement(i) {
$('#i').parent().remove();
// 删除操作代码
// alert('删除功能尚未实现！');
}
</script>
</body>
</html>
