<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
        //全选
        //得到input然后得到type的属性
                function selectAll(){
                    var tag=document.getElementsByTagName("input");
                    for(var i=0;i<tag.length;i++){
                        if(tag[i].type=="checkbox"){
                            tag[i].checked=true;
                        }
                    }
                }
                //全不选
                function noSelect(){
                    var tag=document.getElementsByTagName("input");
                    for(var i=0;i<tag.length;i++){
                        if(tag[i].type=="checkbox"){
                            tag[i].checked=false;
                        }
                    }
                }
                //删除一个
                 function deleteOne(tag){
            var de = window.confirm("确定删除?");
            if(de){
                var tr=tag.parentNode.parentNode;
                var tbody=document.getElementById("tb");
                tbody.removeChild(tr);
            }
               }
               //全部删除
              function deleteAllSelect(){
                 var tbody = document.getElementById("tb");
               var inps = tbody.getElementsByTagName("input");
               for(var i=inps.length-1;i>0;i--){
                  if( inps[i].checked  ){
                      var tr = inps[i].parentNode.parentNode;
                      tbody.removeChild(tr);
                  }
               }
               var first = document.getElementById("first");
               first.checked = null;
            }
        </script>
    </head>
    <body>
        Username:<input type="text" id="name"/>
        Password:<input type="text" id="password"/>
        Email:<input type="text" id="email"/>
        <hr/>
        <table cellpadding='0' cellspacing='0' border='1' align="center" width="70%">
            <tbody id="tb">
            <tr>
                <td><input type="checkbox"  id="first"/></td>
                <td>ID</td>
                <td>Username</td>
                <td>Password</td>
                <td>Email</td>
                <td><input type="button" value="Option"/></td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1</td>
                <td>zmj</td>
                <td>666666</td>
                <td>114322@qq.com</td>
                <td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>wyb</td>
                <td>999999</td>
                <td>6666@qq.com</td>
                <td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>3</td>
                <td>linlin</td>
                <td>555555</td>
                <td>linlin@com.cn</td>
                <td><input type="button" value="delete" onclick="deleteOne(this)"/></td>
            </tr>
            </tbody>
        </table>
        <hr/>
        <center>
            <input type="button" value="全选" onclick="selectAll()"/>
            <input type="button" value="反选"  onclick="noSelect()"/>
            <input type="button" value="删除所选项" onclick="deleteAllSelect()" />
        </center>
    </body>
</html>

JS全选的更多相关文章

  1. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  2. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  3. js全选与反选

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  4. js全选checkbox框

    html: <input  type="checkbox" id="checkbox1" value="1" onclick=&quo ...

  5. Js全选 添加和单独删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JS 全选

    第一种情况 1. 首先得有全选  checkall <input type="checkbox" class="checkAll" value=" ...

  7. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  8. JS——全选与反选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js——全选框 checkbox

    一直会碰见input 全选框的问题,先整理一种情况: 1. <input id="selectAll" type="checkbox" />全选 2 ...

随机推荐

  1. FZU 2243 Daxia like uber

    枚举,最短路. 求出5个点出发的最短路,然后枚举一下这些点之间走的顺序. #pragma comment(linker, "/STACK:1024000000,1024000000" ...

  2. urllib模块 | Python 2.7.11

    官方文档: https://docs.python.org/2/library/urllib.html 某博客对官方文档较全的翻译: http://h2byte.com/post/tech/relat ...

  3. nl2br()与nl2p()函数，php在字符串中的新行（\n）之前插入换行符

    使用情景 很多场合我们只是简单用textarea获取用户的长篇输入,而没有用编辑器.用户输入的换行以“\n”的方式入库,输出的时候有时候会没有换行,一大片文字直接出来了.这个时候可以根据库里的“\n” ...

  4. ResultSet.TYPE_SCROLL_SENSITIVE问题（完全摘自他人）

    摘自CSDN博客 我们先来做一个例子,在例子中我用的是mysql-essential-5.1.30-win32版. 来跟我做以下几个命令: mysql> create database axma ...

  5. Scala AOP

    trait Action { def doAction } trait TBeforeAfter extends Action { abstract override def doAction { p ...

  6. 优秀代码要求（转自http://www.cnblogs.com/brishenzhou/p/6284188.html）

    一段优秀的代码,它一般需要满足以下几个条件: #统一规范# 所有的代码,第一前提必须是统一规范,而常见的统一规范主要包括有以下内容: 1)统一编辑器规范 在团队开发中,我们并不对各个开发人员使用的编辑 ...

  7. ip地址分类和网段区分

    IP地址分类/IP地址10开头和172开头和192开头的区别/判断是否同一网段 简单来说在公司或企业内部看到的就基本都是内网IP,ABC三类IP地址里的常见IP段. 每个IP地址都包含两部分,即网络号 ...

  8. eclipse 发布web工程，修改tomcat端口

    如果想修改tomcat发布的端口,有两种方法: 1.用记事本打开tomcat安装目录下的conf文件夹下的server.xml,找到<Connector port="8080" ...

  9. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  10. CentOS安装glibc-2.14，错误安装libc.so.6丢失急救办法

    CentOS安装glibc-2.14,错误安装libc.so.6丢失急救办法   到http://ftp.gnu.org/gnu/glibc/下载glibc-2.14.tar.xz tar glibc ...