<%@ 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. ASP.NET中重复表格列合并的实现方法(转自脚本之家)

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...

  2. Ubuntu下Git的使用之创建版本库

    创建版本库 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以 ...

  3. 第 2 章 Node.js 中的交互式运行环境 —— REPL

    本章内容包括: 如何使用REPL运行环境以及如何在该运行环境中测试各种JavaScript表达式. 如何定义并启动REPL运行环境. Node.js 框架中为REPL运行环境提供了哪些命令以及这些命令 ...

  4. POJ 3139 Balancing the Scale

    枚举. 看了这个方法:$http://www.cppblog.com/shiming413/archive/2008/12/21/29671.html$ 将数字归类的地方不能用$vector$,会超时 ...

  5. Java：注解（Annotation）自定义注解入门

    转载地址:http://www.cnblogs.com/peida/archive/2013/04/24/3036689.html 要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义自己的 ...

  6. C#代码篇：代码产生一个csv文件调用有两个核心的坑

    忙活了半天终于可以开工了,a物品到底要不要放进去取决于两个因素,第一是a有4kg重,只有背包大于等于4kg的时候才能装进去(也就是说当i=1,k<4时f[i,k]=0):第二是当背包的重量大于等 ...

  7. myeclipse连接数据库oracle（添加jdbc.properties）

    第一步:在src下面建一个包com.xsl.conf 第二步:在建好的包下面新建一个jdbc.properties 第三步:在jdbc.properties里写入内容如下: driver = orac ...

  8. ntp升级

    1. 系统与软件版本 1.1 系统版本 CentOS6.5 x86_64 1.2 ntpd软件版本 ntp-4.2.8p9.tar.gz 1.3 下载地址 官方下载地址:http://support. ...

  9. 如何在IIS8.5上面部署php

    一.开启,设置win8.1自带的IIS 8.5组件服务器. 进入控制面板,选择程序和功能,打开或关闭Windows 功能,找到Internet information services,分别开启FTP ...

  10. MyBatis中update的使用

    当你传入所需要修改的值为一个实体对象时,可能只改动了其中部分的值.那么其他值需要做一个判断是否为空值的操作. XXXmapper.xml <update id="updateMembe ...