JS做动态表格
在后台将数据发送过来后,你需要将这些数据做成表格,实现一般表格管理功能

例如这种数据格式,
首先要创建table

在table中添加thead 在thead中添加tr

循环数组,且创建开头的input勾选框,在每个tr信息前添加一个勾选框

在table中添加tbody

可以看到,在tbody中的遍历了data数据中的值,且在每个人值得末尾追加两个按钮,分别是删除和修改
检测全选框

点击添加的思路是;
1.点击时弹出添加容器
2.点击容器中的确认时,先建立一个空对象,再获取添加容器中的input值(value),分别附上用户输入其中的值

3.追加在总数据末尾
data.push(empty)
4.重新渲染添加页面

我的删除是将所有的共功能按钮放在一起,然后通过取余来判断两种按钮,

当为奇数则是修改

删除事件

查询功能的思路是,获取到tbody下所有的tr中的姓名栏,因为我写的是姓名查询,
将姓名栏追加到一个空数组中后,循环当前数组,查到后,创建一个接受正确值得数组;
循环当前姓名值得那一行,然后追加到当前数组中取去,然后情况table中的内容,将单独这一行tr重新渲染

JS做动态表格的更多相关文章
- element ui的表格列设置fixed后做动态表格出现表格错乱
最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...
- JS 创建动态表格练习
创建动态表格 1.1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- js的动态表格的增删改查思路
1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...
- js的动态表格的增删改查完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- js如何动态创建表格(两种方法)
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
随机推荐
- Linux_CentOS常用命令和shell命令技巧
Linux_CentOS常用命令 关机 init 重启 init 列出当前目录的下的文件 ls //列出当前目录下的文件 ll //列出当前目录下的文件信息 等同ls -l 命令 切换目录 cd 目录 ...
- HTML布局排版手机上浏览的网页
前面做个几个简单的测试html布局排版的页面,都是在浏览器上查看的,C-LODOP可通过集中打印和广域网AO打印方式,让手机等也可以打印预览和打印. 集中打印的大体方法是通过一台windows电脑作为 ...
- Navicat Premium教程
介绍 Navicat premium是一款数据库管理工具,是一个可多重连线资料库的管理工具,它可以让你以单一程式同时连线到 MySQL.SQLite.Oracle 及 PostgreSQL 资料库,让 ...
- 个人博客搭建全记录(Hexo,Github)
搭建过程主要借鉴小歪的博客 博客主题airclod Hexo,Github建站记录 1. 准备 Github账号 注册登陆Github 创建Repository,Repository Name就是Yo ...
- 构造几个死锁的例子(Java )
目录 构造几个死锁的例子(Java ) 1 2 3 构造几个死锁的例子(Java ) 1 public class Deadlock { public static void main(String[ ...
- [CF1005F]Berland and the Shortest Paths_最短路树_堆优化dij
Berland and the Shortest Paths 题目链接:https://www.codeforces.com/contest/1005/problem/F 数据范围:略. 题解: 太鬼 ...
- 线性表——顺序表的实现与讲解(C++描述)
线性表 引言 新生安排体检,为了 便管理与统一数据,学校特地规定了排队的方式,即按照学号排队,谁在前谁在后,这都是规定好的,所以谁在谁不在,都是非常方便统计的,同学们就像被一条线(学号)联系起来了,这 ...
- Java 非访问修饰符
除了访问性修饰符,我们还有非访问性修饰符.这里主要说明static与final修饰符,其他修饰符以后用到再说. 一.static修饰符 static修饰符是用来修饰方法与变量. 1.创建StaticT ...
- PAT(B) 1078 字符串压缩与解压(Java)
题目链接:1078 字符串压缩与解压 (20 point(s)) 题目描述 文本压缩有很多种方法,这里我们只考虑最简单的一种:把由相同字符组成的一个连续的片段用这个字符和片段中含有这个字符的个数来表示 ...
- 【HC89S003F4开发板】 8c转义成汇编工程
HC89S003F4开发板建立汇编工程 选择编译文件 @选用开发板闪灯例程,将例程删除多余的注释,后面生成的文件会更直观. #define ALLOCATE_EXTERN #include " ...