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

页面效果图如下

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. POJ 1734 无向图最小环/有向图最小环

    给定一张图,求图中一个至少包含三个点的环,环上的点不重复,并且环上的边的长度之和最小. 点数不超过100个 输出方案 无向图: /*Huyyt*/ #include<bits/stdc++.h& ...

  2. Codeforces 1000 组合数可行线段倒dp 边双联通缩点求树直径

    A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) using namespace std ...

  3. java基础笔试题一

    1.Vector和ArrayList的区别 答:Vector的方法都是同步的(Synchronized),是线程安全的(thread-safe),而ArrayList的方法不是,由于线程的同步必然要影 ...

  4. 【转载】关于java 的InputStream和OutputStream的理解

    关于InputStream和OutputStream的输入输出方向的理解 InputStream输入类,首先需要读取的内容转化成输入流,再从它那里进行读取,先关联源:之后过程中关联目的,这样形成了流: ...

  5. 【BZOJ1016】【Luogu P4208】 [JSOI2008]最小生成树计数 最小生成树，矩阵树定理

    蛮不错的一道题,遗憾就遗憾在数据范围会导致暴力轻松跑过. 最小生成树的两个性质: 不同的最小生成树,相同权值使用的边数一定相同. 不同的最小生成树,将其都去掉同一个权值的所有边,其连通性一致. 这样我 ...

  6. 使用Vue做个简单的评论 + localstorage存储

     1.引入Vue.js 2.编写代码 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta c ...

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

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

  8. youtube 上 us的站点是有免费的电影。

    us站点有免费: 菲力宾 跟日本的没有免费的 (PHP是菲力宾币)

  9. 如何在输入命令行npm run dev 之后vue项目自动在浏览器打开

    使用代码编辑器打开vue项目代码,在config文件夹里面找到index.js 将里面的:autoOpenBrowser: false, 修改为 :autoOpenBrowser: true, 这个方 ...

  10. jquery delegate()方法 语法

    jquery delegate()方法 语法 作用:delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 delegate( ...