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

页面效果图如下

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' onclick='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(){

                //获取所有的checkbox

                var checkbox = document.getElementsByName("chk");

                //遍历所有的checkbox

                for (var i=0;i<checkbox.length;i++) {

                    checkbox[i].checked=true;

                }

            }

            function fx(){

                //获取所有的checkbox

                var checkbox = document.getElementsByName("chk");

                //遍历所有的checkbox

                for (var i=0;i<checkbox.length;i++) {

                    checkbox[i].checked=!checkbox[i].checked;

                }

            }

            function qbx(){

                //获取所有的checkbox

                var checkbox = document.getElementsByName("chk");

                //遍历所有的checkbox

                for (var i=0;i<checkbox.length;i++) {

                    checkbox[i].checked=false;

                }

            }

        </script>

    </body>

</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. 标准C语言(7)

    函数调用过程中通常伴随着两个函数之间的数据传递.数据传递存在两个完全相反的方向(可以从调用函数,向被调用函数传递数据也可以从被调用函数向,调用函数传递数据),任意方向的数据传递都使用被调用函数提供的存 ...

  2. visudo修改编辑器vim

    update-alternatives --config editor

  3. 网络编程简介（OSI七层协议，TCP协议原理，三次握手与四次挥手）

    目录 网络编程 软件开发架构 C/S架构 B/S架构 网络编程的发展史 互联网协议 1.物理连接层 2.数据链路层 3.网络层 4.传输层 5.应用层 三次握手四次挥手 三次握手建链接 数据传输 四次 ...

  4. [转帖]H5 手机 App 开发入门：技术篇

    H5 手机 App 开发入门:技术篇   http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...

  5. hdu 5695 百度熊教体育 拓扑排序 好题

    Gym Class Time Limit: 6000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  6. HGOI 20191106

    HGOI 20191106 t1 旅行家(traveller) 2s,256MB [题目背景] 小X热爱旅行,他梦想有一天可以环游全世界-- [题目描述] 现在小X拥有n种一次性空间转移装置,每种装置 ...

  7. 论文阅读：Fast, Scalable, and Programmable Packet Scheduler in Hardware

    摘要: 随着链接速度的提高和CPU扩展速度的放缓,软件中的数据包调度会导致较低的精度和较高的CPU利用率. 通过将数据包调度卸载到诸如NIC之类的硬件,可以潜在地克服这些缺点.然而为了保持软件分组调度 ...

  8. 博主的OI流水账

    2017.8.4 入坑OI 2017.11.11 参加了NOIP2017提高组,0+85+0+30+50+0=165,荣获省二(具体分数其实记不清了反正差不多吧) 2018.2 学会树状数组,线段树 ...

  9. Spring Boot教程（二十六）使用Spring Security安全控制

    准备工作 首先,构建一个简单的Web工程,以用于后续添加安全控制,也可以用之前Chapter3-1-2做为基础工程.若对如何使用Spring Boot构建Web应用,可以先阅读<Spring B ...

  10. python3 使用装饰器，及函数作为参数

    #装饰import typesdef shucai(n): print('蔬菜价格7') if type(n)==types.FunctionType: return n()+7 return n+7 ...