页面点击按钮添加一行    删除一行   全选   反选  全不选

页面效果图如下

html页面代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><title></title><script>var rows = 1;function addrows() {var trElement = document.createElement("tr");var td1Element = document.createElement("td");var td2Element = document.createElement("td");var td3Element = document.createElement("td");var td4Element = document.createElement("td");td1Element.innerHTML="<input type='checkbox' value='1' name='chk'>"+rows;td2Element.innerHTML="<input type='text' value='' required name='account' class='form-control'>";td3Element.innerHTML="<input type='password' value='' required name='password' class='form-control'>";td4Element.innerHTML="<input type='button' value='删除当前行' class='btn btn-danger' οnclick='delrow(this)'>";trElement.appendChild(td1Element);trElement.appendChild(td2Element);trElement.appendChild(td3Element);trElement.appendChild(td4Element);var tbody = document.getElementById("tb");tbody.appendChild(trElement);rows++;}function delrow(obj){//获取按钮所在的行
                btnTrElement = obj.parentNode.parentNode;//alert(btnTrElement.nodeName);//获取按钮所在的行的上一级也就是TBODY
                tbodyElemement = btnTrElement.parentNode;//通过tobody干掉tr
                tbodyElemement.removeChild(btnTrElement);}</script></head><body><form><table class="table table-responsive table-striped" id="table"><thead><th>序号</th><th>账号</th><th>口令</th><th>操作</th></thead><tbody id="tb"><!--<tr><td></td><td></td><td></td><td></td></tr>--></tbody><tfoot><tr><td align="center" colspan="4"><button class="btn btn-success" onclick="qx()">全选</button>&nbsp;&nbsp;&nbsp;<button class="btn btn-warning" onclick="fx()">反选</button>&nbsp;&nbsp;&nbsp;<button class="btn btn-danger" onclick="qbx()">全不选</button>&nbsp;&nbsp;&nbsp;<input  class="btn btn-info" type="submit" value="哦了提交"><button class="btn btn-primary" onclick="addrows()">添加一行</button></td></tr></tfoot></table></form><script>function qx(){//获取所有的checkboxvar checkbox = document.getElementsByName("chk");//遍历所有的checkboxfor (var i=0;i<checkbox.length;i++) {checkbox[i].checked=true;}}function fx(){//获取所有的checkboxvar checkbox = document.getElementsByName("chk");//遍历所有的checkboxfor (var i=0;i<checkbox.length;i++) {checkbox[i].checked=!checkbox[i].checked;}}function qbx(){//获取所有的checkboxvar checkbox = document.getElementsByName("chk");//遍历所有的checkboxfor (var i=0;i<checkbox.length;i++) {checkbox[i].checked=false;}}</script></body></html>

转载于:https://www.cnblogs.com/angelye/p/7479865.html

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选相关推荐

  1. 微信小程序---点击按钮添加、删除输入框(input)

    这篇文章以前几篇文章为基础! 在wxml文件中设置循环输入框和添加.删除按钮. <block wx:for="{{lists}}" wx:key="{{index} ...

  2. Three.js中实现点击按钮添加删除旋转立方体

    场景 Three.js中引入dat.gui库实现界面组件控制动画速度变量: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1193 ...

  3. kayui进行添加_关于layui 实现点击按钮添加一行(方法渲染创建的table)

    目标:layui 实现点击按钮添加一行 解决方案: 方案1.table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个 标签: 方案2.table 是用方法渲染的方式创建的 ...

  4. HTML_页面点击按钮关闭页面的几种方式

    HTML页面点击按钮关闭页面的几种方式 文章目录 HTML页面点击按钮关闭页面的几种方式 一.不带任何方式的关闭窗口 二.提示之后关闭页面 三.点击关闭本页面并跳转到其他页面 四.将 三 中的方法放到 ...

  5. HTML页面点击按钮关闭页面的方式

    这篇文章给大家分享HTML页面点击按钮关闭页面的几种方式,实现思路非常简单,有不带任何方式的关闭窗口,提示之后关闭页面,点击关闭本页面并跳转到其他页面等等,每种方式结合实例代码给大家介绍的非常详细,需 ...

  6. autojs,读取一行删除一行,停止自己外的脚本

    新建交流群917400262 欢迎加入v群,和各位大神一同交流 免责声明:本博客提供的所有内容仅供学习.分享与交流,我们不保证内容的正确性.通过使用本博客内容随之而来的问题与本博客无关.当使用本博客代 ...

  7. html网页全选效果,为什么我用js写的全选/反选/全不选页面，没有效果？

    代码奉上 清空 买什么书? PHP HTML5 全选 反选 全不选 function checkall(form,status){ var elements = form.getElementByTa ...

  8. html5页面拨打电话,5.添加页面／设置点击拨打电话

    1.新增页面.新建的作品里默认是两页,这时候制作第三页需要我们自己新建.这与PPT有些类似,在第二页页面上右击,点击新增空白页: 2.第三页新建的画布. 3.素材上传/摆放/设置动画及播放次序.上两节 ...

  9. 通过按钮添加、删除表格及表单元素

    写页面的时候有个需求:通过点击"添加""删除"按钮,添加和删除表格里的一行.表格里除了文字还有些按钮.下拉选框之类的类似于这种. 刚学前端很多知识都欠缺,查了些 ...

最新文章

  1. 4.1.1 初识文件管理
  2. 三年开发项目经验总结
  3. 《现代操作系统》笔记 2 线程
  4. 睡觉的时候，程序能不能自动查 bug？
  5. 【原】IOS合并lib(.a)库的终极可用方法(可用于解决duplicate symbol静态库冲突)
  6. checkbox:获取选中的checkbox
  7. Qt 流畅的运行大循环
  8. Android个人日常消费理财_财务软件
  9. （Note）CIE色度图
  10. 使用阿里云centos7.6进行steam挂卡（使用ASF，更新日期为2021.2.12）解决ASF服务器中文运行的问题
  11. java 读取gzip_Java读取GZIP
  12. 微信诞生8年了，但还有8亿人不懂微信聊天礼仪
  13. Promise学习:基础入门
  14. 基于vue+elementui 月子中心会所系统web
  15. 本地测试dubbo远程调用找不到provider
  16. 卡西欧计算机键盘讲解,卡西欧小方块按键介绍
  17. mysql索引与md5_谈Mysql索引
  18. 在计算机中 音乐被数字化了 被一,音乐课题：浅谈数字化资源在幼儿园音乐教学中的运用...
  19. asp 和 html 婚鞋,几招教会你搭配出完美婚鞋
  20. Operator介绍

热门文章

  1. 平行空间怎么设置32位_每周推荐 | 空间占用减小32%，具有高级功能的16位逻辑封装...
  2. leetcode链表篇
  3. leetcode —— 965. 单值二叉树
  4. C++/C--文件及函数注释【转载】
  5. Promises 对比 callbacks
  6. Vs code 02 配置非标准的C、C++的编译环境
  7. dnf公共频道服务器不稳定已从初始化状态,合区前兆?DNF公共频道开启跨区添加好友服务...
  8. linux内存利用率多少合适,如何理解linux服务器中的内存使用率和平均负载
  9. 动态照片墙 python 实现_利用python生成照片墙的示例代码
  10. js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用