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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/3930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts(没有 uni_modules)

这种情况无法直接从 dcloud 平台上一键下载导入&#xff0c;所以应该在官网推荐的 git 仓库去单独下载&#xff1a; https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6/qiun-data-charts(%E9%9D%9Euni_modules) 下载的文件是如图所示的路径&…

攻防世界 easyphp

本题主要利用的知识点是php绕过 一、PHP代码分析 首先先看一下代码 我们需要利用get方式上传3个参数a,b,c&#xff0c;这3个分别需要满足不同的条件: a&#xff1a;设置a值&#xff1b;值大于6000000&#xff1b;长度不超过3&#xff1b; b&#xff1a;设置b值&#xff1b;MD…

vue3前端调用后端接口实现批量删除

//删除的接口 export const deleteApi (address: string, methods: string, id: string) > { return instance<{ id: string }>({ url: address "/" id, method: methods, }); }; //批量删除 let selection ref([]) const handleSelectionChang…

【Qt】信号与槽

1 &#x1f351;信号和槽概述&#x1f351; 在 Qt 中&#xff0c;用户和控件的每次交互过程称为⼀个事件。⽐如 “⽤⼾点击按钮” 是⼀个事件&#xff0c;“⽤⼾关闭窗⼝” 也是⼀个事件。每个事件都会发出⼀个信号&#xff0c;例如⽤⼾点击按钮会发出 “按钮被点击” 的信号&…

Netty: NIO网络编程

文章目录 一、NIO介绍二、NIO原理三、Buffer四、Channel五、Selector 一、NIO介绍 NIO介绍 二、NIO原理 NIO有三大核心部分&#xff1a; 通道&#xff08;Channel&#xff09;、缓冲区&#xff08;Buffer&#xff09;和选择器&#xff08;Selector&#xff09;。Channel是对原…

深入探索CSS中的渐变艺术:线性渐变、径向渐变与锥形渐变详解

CSS3引入了多种渐变效果&#xff0c;使网页设计师能够在网页元素上实现平滑、连续的颜色过渡&#xff0c;大大丰富了视觉表达手段。在这篇文章中&#xff0c;我们将详细解读CSS3中的三种核心渐变类型&#xff1a;线性渐变&#xff08;Linear Gradients&#xff09;、径向渐变&a…

Golang爬虫代理接入的技术与实践

引言 随着互联网的迅猛发展&#xff0c;数据已经成为现代社会的重要资源之一。而网络爬虫作为一种数据采集工具&#xff0c;扮演着至关重要的角色。在Golang语言的生态系统中&#xff0c;开发者们可以借助其强大的并发特性和丰富的标准库&#xff0c;轻松构建高效稳健的网络爬…

websocket爬虫

人群看板需求分析 先找到策略中心具体的数据。对应数据库中的数据 看看接口是否需要被逆向 点开消费者细分&#xff0c;可以找到人群包&#xff08;人群名称&#xff09; 点击查看透视 label字段分类: 在这里插入图片描述 预测年龄&#xff1a;tagTitle 苹果id&#x…

微信小程序webview和小程序通讯

1.背景介绍 1.1需要在小程序嵌入vr页面&#xff0c;同时在vr页面添加操作按钮与小程序进行通信交互 1.2 开发工具&#xff1a;uniapp开发小程序 1.3原型图 功能&#xff1a;.点击体验官带看跳转小程序的体验官带看页面 功能&#xff1a;点击立即咨询唤起小程序弹窗打电话 2.…

RPA机器人怎么操作知乎好物推荐自动点击【添加】商品按钮?

先看需要实现的效果&#xff08;启动机器人-点击收益&#xff08;打开商品卡片列表&#xff09;-点击添加&#xff08;自动添加商品卡片到文章&#xff09;&#xff09;&#xff1a; 学员提问&#xff1a; 知乎上点击好物推荐【添加】商品按钮&#xff0c;iframe的元素是动态的…

表情识别 | 卷积神经网络(CNN)人脸表情识别(Matlab)

表情识别 | 卷积神经网络(CNN)人脸表情识别&#xff08;Matlab&#xff09; 目录 表情识别 | 卷积神经网络(CNN)人脸表情识别&#xff08;Matlab&#xff09;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab使用卷积神经网络(CNN)&#xff0c;进行人脸表情情绪识别…

数据结构(九)---并查集

目录 1.集合 2.集合的相关操作 (1)查(Find)&#xff1a; •Find操作的优化 (2)并(Union)&#xff1a; •Union操作的优化 1.集合 数据元素之间的逻辑关系可以为集合&#xff0c;树形关系&#xff0c;线性关系&#xff0c;图关系。对于集合而言&#xff0c;一个集合可以划…

【嵌入式AI部署神经网络】STM32CubeIDE上部署神经网络之指纹识别(Pytorch)——篇一|环境搭建与模型初步部署篇

前言:本篇主要讲解搭建所需环境,以及基于pytorch框架在stm32cubeide上部署神经网络,部署神经网络到STM32单片机,本篇实现初步部署模型,没有加入训练集与验证集,将在第二篇加入。篇二详细讲解STM32CubeIDE上部署神经网络之指纹识别(Pytorch)的数据准备和模型训练过程等,…

Chrome 网络调试程序 谷歌网络调试 network

目录 1.网络面板总览2.概况了解3.Waterfall接口排队等待时间4.关注请求接口的Size,可能是占据内存溢出的接口5.过滤器一栏 fetch/xhr 什么意思6. Stalled 什么意思7.Queueing 什么意思8.Queueing和Stalled之间什么关系9.为什么会有阻塞状态10.Time列是pending 什么意思 1.网络面…

宏基因组|使用MEGAHIT组装

简介 MEGAHIT 是一款超快速且内存高效的下一代测序&#xff08;NGS&#xff09;组装工具&#xff0c;专门针对宏基因组进行了优化&#xff0c;同时在处理常规单个基因组&#xff08;小型或哺乳动物规模&#xff09;以及单细胞组装任务时也有出色表现。 主要特点与功能&#x…

node.js egg.js

Egg 是 Node.js 社区广泛使用的框架&#xff0c;简洁且扩展性强&#xff0c;按照固定约定进行开发&#xff0c;低协作成本。 在Egg.js框架中&#xff0c;ctx 是一个非常核心且常用的对象&#xff0c;全称为 Context&#xff0c;它代表了当前 HTTP 请求的上下文。ctx 对象封装了…

数据库和表创建练习

一丶要求 1.创建一个数据库db_classes 2 创建一行表db_hero 3. 将四大名著中的常见人物插入这个英雄表 二丶创建db_classes一个数据库, 使用数据库默认的字符集 create database db_classes; 三丶创建一行表db_hero 1.先切换到我们创建的db_classes;数据库中 use db_class…

怎么从回收站恢复已删除的文件?(5种恢复方法)

回收站是电脑操作系统中的一个特殊目录&#xff0c;用于存储被删除但尚未完全清除的文件和文件夹。当用户删除文件或文件夹时&#xff0c;它们并不立即从硬盘驱动器中移除&#xff0c;而是被移动到回收站。这样设计的目的是为了给用户一个“第二次机会”&#xff0c;如果他们意…

nvm的下载与安装

nvm&#xff08;Node Version Manager&#xff09;是一个用于管理 Node.js 版本的工具&#xff0c;它允许您在同一台计算机上安装和切换不同的 Node.js 版本。 一、下载地址 https://github.com/coreybutler/nvm-windows/releases 二、安装nvm 三、设置环境变量 在命令提示…

linux系统-FTP服务配置

目录 一、FTP简介 1.什么是FTP&#xff1f;&#xff1f;&#xff1f; 2.FTP的两种模式 二、安装配置FTP服务 1.关闭防火墙和核心防护 2.安装VSFTPD 3.修改配置文件 4.黑白名单设置 一、FTP简介 1.什么是FTP&#xff1f;&…