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

页面效果图如下

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. Python内部执行过程

    一.编译过程概述 当我们执行Python代码的时候,在Python解释器用四个过程“拆解”我们的代码,最终被CPU执行返回给用户. 首先当用户键入代码交给Python处理的时候会先进行词法分析,例如用 ...

  2. parfile解决exp时tables过多问题

    parfile 一般用于表数据过大.使用导出.导入命令参数过多等场景: 在对oracle数据库使用exp命令导出数据时,如果tables=后面跟的表比较多,就是导致命令行放不下,从而不能导出.百度一把 ...

  3. 最长回文子串（动规，中心扩散法，Manacher算法）

    题目 leetcode:5. Longest Palindromic Substring 解法 动态规划 时间复杂度\(O(n^2)\),空间复杂度\(O(n^2)\) 基本解法直接看代码 class ...

  4. linux服务器上如何使用nginx访问本地静态资源

    查看80端口是否被占用,一般80端口多被apache服务占用. netstat -anp|grep 80 2.修改apache服务的端口号 vim /etc/apache2/ports.conf 3. ...

  5. mysql 在gtid环境下缺少一部分binlog部署从库

    我的环境: 有两台linux服务器 一台是192.168.1.1  mysql  端口3301 一台是192.168.1.2   mysql 端口3303 要讨论如何恢复从库,我们得先来了解如下一些概 ...

  6. CentOS 7 安装 metasploit-framework

    1 一键安装metasploit-framework apt-get install curl,wgetcurl https://raw.githubusercontent.com/rapid7/me ...

  7. nginx跨域设置&文件上传大小限制

    在部署项目的时候碰到这么一个问题:XMLHttpRequest cannot load,下面阐述一下这个问题 问题背景: 用nginx+tomcat部署项目.tomcat用的8080端口,nginx用 ...

  8. 11、LineEdit与setCompleter自动补全

    #include "mainwindow.h" #include "ui_mainwindow.h" #include <QDebug>//引入打印 ...

  9. Angular 文档中的修改链接是从哪里改的

    如何修改修改的文本的链接. 如下图表示的,如何修改这个地方的链接到自己的 SCM 中. 你需要修改的文件为: aio\tools\transforms\templates\lib\githubLink ...

  10. 学习sklearn聚类使用

    学习利用sklearn的几个聚类方法: 一.几种聚类方法 1.高斯混合聚类(mixture of gaussians) 2.k均值聚类(kmeans) 3.密度聚类,均值漂移(mean shift) ...