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

页面效果图如下

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. nvidia-docker安装

    如果之前安装过docker1.0版本,需要先删掉该版本和之前创建的容器 docker volume ls -q -f driver=nvidia-docker | xargs -r -I{} -n1 ...

  2. 北美CS求学找工指南

    这篇文章主要谈谈来美求学工作这一路的点点滴滴,因为之前留言中不少同学对这方面内容比较感兴趣,有些已经在准备,有些还在犹豫,希望本文能对大家有些许帮助.因为来美的途径也有不少,有上学.有投资.有通过国内 ...

  3. 心态炸了，我再写一个4.1.0版本的SND实例

    maven依赖 <!-- Tests --><dependency> <groupId>org.springframework</groupId> &l ...

  4. MHA介绍和基础、原理、架构、工具介绍

    一.MHA简介 软件简介 MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebo ...

  5. Http请求Response Code含义

    http状态返回代码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码.100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分.101 ...

  6. feign请求远程接口时报Caused by: java.net.UnknownHostException

    报错全文如下 feign.RetryableException: host10.local executing POST http://TIBMAS2-WEBAPI/tibmas2-webapi/ap ...

  7. html中删除表格的一行(有弹窗)

    html中删除表格一行其实很简单,但是加上一个提示弹窗后,点击确定后却获取不到要删除的是哪一行,下面是一个demo html: <tr> <td> <input type ...

  8. grunt-contrib-uglify js压缩

    grunt-contrib-uglify:压缩以及合并JavaScript文件. 插件安装:npm install grunt-contrib-uglify --save-dev 参数: banner ...

  9. Acwing-284-金字塔(区间DP)

    链接: https://www.acwing.com/problem/content/description/286/ 题意: 虽然探索金字塔是极其老套的剧情,但是有一队探险家还是到了某金字塔脚下. ...

  10. LU分解法求逆矩阵 C语言实现

    最近在网上找了下,没有找到我想要的C语言版本,找到的也是错误的.故自己写了一个,并进行了相关测试,贴出来分享. 具体的LU分解算法就不细说了,随便找本书就知道了,关键是分解的处理流程,细节特别容易出错 ...