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

例如这种数据格式，

首先要创建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做动态表格的更多相关文章

  1. element ui的表格列设置fixed后做动态表格出现表格错乱

    最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...

  2. JS 创建动态表格练习

    创建动态表格 1.1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. js的动态表格的增删改查思路

    1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...

  4. js的动态表格的增删改查完整代码

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  6. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  7. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  8. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  9. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

随机推荐

  1. jmeter配置元件之计数器

    如果需要引用的数据量较大,且要求不能重复或者需要自增,那么可以使用计数器来实现. 计数器(counter):允许用户创建一个在线程组之内都可以被引用的计数器. 计数器允许用户配置一个起点,一个最大值, ...

  2. 详解 C++11 lambda表达式

    详解 C++11 lambda表达式   lambda表达式是函数式编程的基础.咱对于函数式编程也没有足够的理解,因此这里不敢胡言乱语,有兴趣的可以自己查找相关资料看下.这里只是介绍C++11中的la ...

  3. php报错syntax error, unexpected T_GOTO, expecting T_STRING，报错文件与行数指向以下代码，是什么原因?

    本机php版本是5.3.8,Apache/2.2.21public function goto($url, $msg=NULL) {if ($msg) {$this->jsAlert($msg) ...

  4. 003-结构型-07-享元模式（Flyweight）

    一.概述 提供了减少对象数且从而改善应用所需的对象结构的方式.运用共享技术有效地支持大是细粒度的对象. 它通过与其他类似对象共享数据来减小内存占用.它使用共享物件,用来尽可能减少内存使用量以及分享资讯 ...

  5. ubuntu 防火墙打开关闭

    1.查看防火墙状态 sudo ufw status 2.打开防火墙 sudo ufw enable 3.关闭防火墙 sudo ufw disable

  6. Delphi XE中使用dbExpress连接MySQL数据库疑难问题解决

    Delphi IDE中包含一个Data Explorer的组件,如下图所示: 该组件基于dbExpress(包含TSQLConnection.TSQLDataSet.TSQLQuery.TSQLSto ...

  7. 【转】do...while(0)的妙用

    前言 今天无意中看到这个标题,因为好奇就点进去了,不错,又学习啦... 具体内容: 1. do...while(0)消除goto语句: 2 宏定义中的do...while(0): 参考 1. 原链接_ ...

  8. 常用HTML转义字符,html转义符,JavaScript转义符,html转义字符表,HTML语言特殊字符对照表(ISO Latin-1字符集)

    HTML字符实体(Character Entities),转义字符串(Escape Sequence) 为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,> ...

  9. PyCharm安装及其使用

    1.前提:Python+selenium的安装教程如下网址 https://www.cnblogs.com/linxiu-0925/p/9597634.html 2.PyCharm安装 1.首先去Py ...

  10. C# .NET 判断输入的字符串是否只包含数字和英文字母

    FROM :   https://www.cnblogs.com/ilookbo/p/4828722.html /// <summary> /// 判断输入的字符串是否只包含数字和英文字母 ...