本文主要是介绍html+css+js+jquery实现在网页端将手动输入用户的信息转化成表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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>以上就是此次分享的内容，希望可以对大家有用！！！！！
这篇关于html+css+js+jquery实现在网页端将手动输入用户的信息转化成表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
