jQuery实现表(table)的增、删功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.0.js"></script>
</head>
<body>
用户名: <input type="text" id="username">
年 龄: <input type="text" id="age">
性 别: <input type="text" id="gender">
<!-- 给按钮添加事件,在js中定义的方法 -->
<button onclick="addData()">提交</button>
<hr>
<table id="dataContent" border="1" cellspacing="0" cellpadding="0" width="60%">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
</body>
<script>
var dataContent = $('#dataContent');
function addData() {
var username = $('#username').val();
var age = $('#age').val();
var gender = $('#gender').val();
var trData = '<tr>' +
'<td>' + username + '</td>' +
'<td>' + age + '</td>' +
'<td>' + gender + '</td>' +
'<td><button onclick="deleteData(this)">删除</button></td>' +
'</tr>';
dataContent.append(trData);
}
// btnTag是指当前删除按钮, 是个dom对象
function deleteData(btnTag) {
// btnTag是个dom对象, 所以要使用 $(btnTag);
// tr是button的祖先元素,就需要使用 parents方法.
$(btnTag).parents('tr').remove();
}
</script>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/5d307807befc34075585b0250d88d8e7.png)