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

页面效果图如下

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. HDU 多校第四场题解

    对于 D 题的原题意,出题人和验题人赛前都没有发现标算存在的问题,导致了许多选手的疑惑和时间的浪费,在此表示真诚的歉意! 预计难度分布: Easy - DJKL, Medium - ABCEG, Ha ...

  2. Office365 PowerShell打开邮箱审计功能

    最近总公司要求Office365需要在所有的邮箱上面打开审计功能.这个功能没法通过图形界面操作,只能通过powershell脚本实现. 微软提供了一个官方的脚本,不过里面有个小bug https:// ...

  3. C++最快获取像素值

    HDC hdc, hdcTemp; RECT rect; BYTE* bitPointer; int x, y; int red, green, blue, alpha; while(true) { ...

  4. linux yum的配置文件 repo文件详解

    linux yum的配置文件 repo文件详解 什么是repo文件?repo文件是Fedora中yum源(软件仓库)的配置文件,通常一个repo文件定义了一个或者多个软件仓库的细节内容,例如我们将从哪 ...

  5. 一例基于thinkphp，jquery和bootstrap渲染的查询数据分页器

    对于某些查询记录很多的结果,web页面不得不采用分页器,现在奉上一例代码,其主要逻辑是:由页面的dom 节点发起ajax请求,返回的查询结果根据页面布局需要进行切片:并根据总记录数和页面展现的条数算出 ...

  6. POJ 2195 一人一房 最小费用流 建图 水题

    Going Home Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 21010   Accepted: 10614 Desc ...

  7. python环境下安装opencv库的方法

    注意:安装opencv之前需要先安装numpy,matplotlib等 一.安装方法 方法一.在线安装 1.先安装opencv-python pip install opencv-python --u ...

  8. Github 已经托管超过 1000 万个项目库

    2013 年对 Github 来说是不可思议和富有成效的一年,几天前 Github.com 上托管的项目已经超过 1000 万. 在此之前,首个 100 万项目用了将近 4 年时间,具体是 3 年 8 ...

  9. 如何在一个页面使用多个router-view显示不同的内容

    todo https://www.jianshu.com/p/92f61bf9db81

  10. 上传本地文件到linux

    Linux 命令行上传文件 Linux服务器,硬盘坏了,更换硬盘后,重装了好像是Foreda v22的操作系统,我在/var/www/html/目录下新建了我的个人文件夹 kma,然后我在此kma文件 ...