1.实现的效果图
2.css代码
<style>
*{
background-color: antiquewhite;
}
#ss{
font-size:20px;
text-align: center;
}
#inputForm {
margin-bottom: 20px;
}
#userTable {
width: 100%;
border-collapse: collapse;
}
#userTable th, #userTable td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
#userTable .delete-btn {
text-align: center;
cursor: pointer;
}
</style>
3.js+jquert代码
注意：在使用js的时候要引入js资源：https://code.jquery.com/jquery-3.6.0.min.js
<script>
$(document).ready(function() {
$('#submitBtn').click(function() {
var number=$('#number').val();
var name = $('#name').val();
var age = $('#age').val();
var sex = $('#sex').val();
var account = $('#account').val();
var password = $('#password').val();
var email = $('#email').val();
if (number && name && age && sex && account && password && email) {
var row = $('<tr></tr>');
row.append('<td class="select-btn"><input type="checkbox"></td>');
row.append('<td>' + number + '</td>');
row.append('<td>' + name + '</td>');
row.append('<td>' + age + '</td>');
row.append('<td>' + sex + '</td>');
row.append('<td>' + account + '</td>');
row.append('<td>' + password + '</td>');
row.append('<td>' + email + '</td>');
row.append('<td class="delete-btn">删除</td>');
$('#userTable tbody').append(row);
// 为新添加的行的删除按钮绑定点击事件
row.find('.delete-btn').click(function() {
$(this).closest('tr').remove(); // 删除当前行
});
// 清空输入框以便输入新的用户信息
$('#number').val('');
$('#name').val('');
$('#age').val('');
$('#sex').val('');
$('#account').val('');
$('#password').val('');
$('#email').val('');
} else {
alert('请填写所有字段！');
}
});
// 批量删除所选事件
$('#delSel').click(function(){
$('#userTable tbody input[type="checkbox"]:checked').each(function() {
$(this).closest('tr').remove(); // 删除选中的行
});
});
});
// 实现全选事件
function selectAllRows(checkbox) {
var rows = document.querySelectorAll('#userTable tbody input[type="checkbox"]');
for (var i = 0; i < rows.length; i++) {
rows[i].checked = checkbox.checked;
}
}
</script>4.全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户信息表格</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
*{
background-color: antiquewhite;
}
#ss{
font-size:20px;
text-align: center;
}
#inputForm {
margin-bottom: 20px;
}
#userTable {
width: 100%;
border-collapse: collapse;
}
#userTable th, #userTable td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
#userTable .delete-btn {
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<span id="ss">用户信息表格</span>
<div id="inputForm">
<label for="number">编号:</label>
<input type="number" name="number" id="number"><br><br>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="number" id="age" name="age"><br><br>
<label for="text">性别:
<select name="sex" id="sex">
<option>男</option>
<option>女</option>
</select>
</label><br><br>
<label for="text">账号:</label>
<input type="text" id="account" name="account"><br><br>
<label for="text">密码:</label>
<input type="text" id="password" name="password"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<button id="submitBtn">提交</button>
<button id="delSel">删除所选</button>
</div>
<table id="userTable">
<thead>
<tr>
<th><input type="checkbox" onclick="selectAllRows(this)" name="chk" id="chk">全选</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>账号</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody id="input">
<!-- 用户信息将在这里动态生成 -->
</tbody>
</table>
<script>
$(document).ready(function() {
$('#submitBtn').click(function() {
var number=$('#number').val();
var name = $('#name').val();
var age = $('#age').val();
var sex = $('#sex').val();
var account = $('#account').val();
var password = $('#password').val();
var email = $('#email').val();
if (number && name && age && sex && account && password && email) {
var row = $('<tr></tr>');
row.append('<td class="select-btn"><input type="checkbox"></td>');
row.append('<td>' + number + '</td>');
row.append('<td>' + name + '</td>');
row.append('<td>' + age + '</td>');
row.append('<td>' + sex + '</td>');
row.append('<td>' + account + '</td>');
row.append('<td>' + password + '</td>');
row.append('<td>' + email + '</td>');
row.append('<td class="delete-btn">删除</td>');
$('#userTable tbody').append(row);
// 为新添加的行的删除按钮绑定点击事件
row.find('.delete-btn').click(function() {
$(this).closest('tr').remove(); // 删除当前行
});
// 清空输入框以便输入新的用户信息
$('#number').val('');
$('#name').val('');
$('#age').val('');
$('#sex').val('');
$('#account').val('');
$('#password').val('');
$('#email').val('');
} else {
alert('请填写所有字段！');
}
});
// 批量删除所选事件
$('#delSel').click(function(){
$('#userTable tbody input[type="checkbox"]:checked').each(function() {
$(this).closest('tr').remove(); // 删除选中的行
});
});
});
// 实现全选事件
function selectAllRows(checkbox) {
var rows = document.querySelectorAll('#userTable tbody input[type="checkbox"]');
for (var i = 0; i < rows.length; i++) {
rows[i].checked = checkbox.checked;
}
}
</script>
</body>
</html>以上就是此次分享的内容，希望可以对大家有用！！！！！
