html+css+js+jquery实现在网页端将手动输入用户的信息转化成表格

htmledit_views">

1.实现的效果图

2.html" title=css>css代码

html"><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

html" title=javascript>javascript"><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.全部代码

html"><!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>

以上就是此次分享的内容，希望可以对大家有用！！！！！