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

页面效果图如下

html页面代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
  7.         <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  8.         <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  9.         <title></title>
  10.         <script>
  11.             var rows = 1;
  12.             function addrows() {
  13.                 var trElement = document.createElement("tr");
  14.                 var td1Element = document.createElement("td");
  15.                 var td2Element = document.createElement("td");
  16.                 var td3Element = document.createElement("td");
  17.                 var td4Element = document.createElement("td");
  18.                 td1Element.innerHTML="<input type='checkbox' value='1' name='chk'>"+rows;
  19.                 td2Element.innerHTML="<input type='text' value='' required name='account' class='form-control'>";
  20.                 td3Element.innerHTML="<input type='password' value='' required name='password' class='form-control'>";
  21.                 td4Element.innerHTML="<input type='button' value='删除当前行' class='btn btn-danger' onclick='delrow(this)'>";
  22.  
  23.                 trElement.appendChild(td1Element);
  24.                 trElement.appendChild(td2Element);
  25.                 trElement.appendChild(td3Element);
  26.                 trElement.appendChild(td4Element);
  27.  
  28.                 var tbody = document.getElementById("tb");
  29.                 tbody.appendChild(trElement);
  30.                 rows++;
  31.             }
  32.             function delrow(obj){
  33.                 //获取按钮所在的行
  34.                 btnTrElement = obj.parentNode.parentNode;
  35.                 //alert(btnTrElement.nodeName);
  36.                 //获取按钮所在的行的上一级也就是TBODY
  37.                 tbodyElemement = btnTrElement.parentNode;
  38.                 //通过tobody干掉tr
  39.                 tbodyElemement.removeChild(btnTrElement);
  40.             }
  41.         </script>
  42.     </head>
  43.  
  44.     <body>
  45.         <form>
  46.             <table class="table table-responsive table-striped" id="table">
  47.  
  48.                 <thead>
  49.                     <th>序号</th>
  50.                     <th>账号</th>
  51.                     <th>口令</th>
  52.                     <th>操作</th>
  53.                 </thead>
  54.                 <tbody id="tb">
  55.                     <!--
  56.                     <tr>
  57.                         <td></td>
  58.                         <td></td>
  59.                         <td></td>
  60.                         <td></td>
  61.                     </tr>-->
  62.                 </tbody>
  63.                 <tfoot>
  64.                     <tr>
  65.                         <td align="center" colspan="4">
  66.                             <button class="btn btn-success" onclick="qx()">全选</button>&nbsp;&nbsp;&nbsp;
  67.                             <button class="btn btn-warning" onclick="fx()">反选</button>&nbsp;&nbsp;&nbsp;
  68.                             <button class="btn btn-danger" onclick="qbx()">全不选</button>&nbsp;&nbsp;&nbsp;
  69.                             <input  class="btn btn-info" type="submit" value="哦了提交">
  70.                             <button class="btn btn-primary" onclick="addrows()">添加一行</button>
  71.                         </td>
  72.                     </tr>
  73.                 </tfoot>
  74.             </table>
  75.         </form>
  76.         <script>
  77.             function qx(){
  78.                 //获取所有的checkbox
  79.                 var checkbox = document.getElementsByName("chk");
  80.                 //遍历所有的checkbox
  81.                 for (var i=0;i<checkbox.length;i++) {
  82.                     checkbox[i].checked=true;
  83.                 }
  84.             }
  85.             function fx(){
  86.                 //获取所有的checkbox
  87.                 var checkbox = document.getElementsByName("chk");
  88.                 //遍历所有的checkbox
  89.                 for (var i=0;i<checkbox.length;i++) {
  90.                     checkbox[i].checked=!checkbox[i].checked;
  91.                 }
  92.             }
  93.             function qbx(){
  94.                 //获取所有的checkbox
  95.                 var checkbox = document.getElementsByName("chk");
  96.                 //遍历所有的checkbox
  97.                 for (var i=0;i<checkbox.length;i++) {
  98.                     checkbox[i].checked=false;
  99.                 }
  100.             }
  101.         </script>
  102.     </body>
  103.  
  104. </html>

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选的更多相关文章

  1. 页面点击按钮下载excel（原生js)

    let els = document.getElementsByTagName('iframe'); if(els.length > 0){ for(let i = 0;i < els.l ...

  2. 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法

    H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...

  3. response 后刷新页面,点击按钮后，禁用该按钮

    一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...

  4. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  5. 点击按钮添加一行,和本行的删除功能,序号变动,name属性更改

    <!--html结构--> <div> <input type="button" value="添加一行" onclick=&qu ...

  6. GrideVlew提供点击按钮添加新数据，单击项目修改，长按删除功能

    package com.example.wang.myapplication; import android.app.AlertDialog; import android.content.Dialo ...

  7. dwz中弹出的窗口页面如何获取前页面(点击按钮的页面)的元素？？？

    在页面A.jsp中点击一个按钮,使用$.pdialog.open()方法弹出b.jsp页面(对话框窗口),我要在b.jsp中选中值然后关闭窗口(b.jsp)返回值给A.jsp~ =========== ...

  8. HTML页面中点击按钮关闭页面几种方式与取消

    1.不带任何提示关闭窗口的js代码 <input type="button" name="close" value="关闭" oncl ...

  9. iframe子页面点击按钮，执行父页面的点击事件

    iframe 子页面点击.parent 父页面  的id(auth-link-btn)的事件 <a href="javascript:void(0);" onclick=&q ...

随机推荐

  1. 孕期出血是否先兆流产——B超看婴儿是否在子宫内+hcg值是否过低孕激素不足

    转自:http://blog.sina.com.cn/s/blog_4a869c130102e7nu.html 很多人都经历过孕早期阴道出血,但结局大不一样. 人类受孕后,从一个单细胞逐渐发育成为一个 ...

  2. Acwing-278-数字组合(背包)

    链接: https://www.acwing.com/problem/content/280/ 题意: 给定N个正整数A1,A2,-,AN,从中选出若干个数,使它们的和为M,求有多少种选择方案. 思路 ...

  3. itertools模块、排列、组合、算法

    关于列表重组的python小题 题目一:给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集).             说明:解集不能包含重复的子集. 示例:输入: nums = ...

  4. sql 导入文件

    zai SQLQuery4.sql 文件中 --BULK INSERT Table_1 from 'D:\aaaa#azzz.txt' with(fieldterminator=',',rowterm ...

  5. 插入排序，选择排序，冒泡排序等常用排序算法（java实现）

    package org.webdriver.autotest.Study; import java.util.*; public class sort_examp{ public static voi ...

  6. Windows：在特定路径下启动命令行

    造冰箱的大熊猫,本文适用于Windows 7@cnblogs 2018/11/30 在Windows文件浏览器中,按下“Shift+鼠标右键”,点击“在此处打开命令窗口”.

  7. TTTTTTTTTTTT POJ 2112 奶牛与机器 多重二分匹配 跑最大流 建图很经典！！

    Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 15682   Accepted: 5597 ...

  8. R_Studio(学生成绩)对数据缺失值md.pattern()、异常值分析(箱线图)

    我们发现这张Gary.csv表格存在学生成绩不完全的(五十三名学生,三名学生存在成绩不完整.共四个不完整成绩) 79号大学语文.高等数学 96号中国近代史纲要 65号大学体育 (1)NA表示数据集中的 ...

  9. [CSP-S模拟测试]:小Y的图（最小生成树+LCA）

    题目传送门(内部题131) 输入格式 第一行三个整数$n$.$m$和$Q$. 接下来$m$行每行三个整数$x$.$y$.$z$($1\leqslant x,y\leqslant n,1\leqslan ...

  10. x_-admin

    https://www.cnblogs.com/shikaishikai/p/9699076.html