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>以上就是此次分享的内容，希望可以对大家有用！！！！！
