<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top:10px;
            margin-left: 30%;
        }
        .out{

        }
    </style>
    <script>
        /**/
        //1、在页面加载完后绑定事件
        window.onload=function () {
            //2、给全选按钮绑定事件
            document.getElementById("unSelectAll").onclick= function () {
                //3、遍历全部的属性将未选中设置为选中
                var cbs=document.getElementsByName("cd");
                for (var i=0;i<cbs.length;i++){
                    cbs[i].spellcheck=false;
                }
            }
            document.getElementById("selectall").onclick= function () {
                //3、遍历全部的属性将未选中设置为选中
                var cbs=document.getElementsByName("cd");
                for (var i=0;i<cbs.length;i++){
                    cbs[i].spellcheck=true;
                }
            }
            document.getElementById("selcetRev").onclick= function () {
                //3、遍历全部的属性将未选中设置为选中
                var cbs=document.getElementsByName("cd");
                for (var i=0;i<cbs.length;i++){
                    cbs[i].spellcheck=false;
                }
            }
            document.getElementById("firstCB").onclick= function () {
                //3、遍历全部的属性将未选中设置为选中
                var cbs=document.getElementsByName("cd");
                alert(this);
                for (var i=0;i<cbs.length;i++){
                    cbs[i].spellcheck=false;
                }
            }
            document.getElementsByTagName("tr"){
                for (var i=0;i<trs.length;i++){

                }
            }
        }
    </script>
</head>
<body>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cd" id="firstCB"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cd"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0)">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cd"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0)"></a>删除</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>？</td>
        <td><a href="javascript:void(0)"></a> 删除</td>
    </tr>

</table>
<div>
    <input type="button" id="selectall" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selcetRev" value="反选">
</div>
</body>
</html>

js学习——1的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. js学习之变量、作用域和内存问题

    js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...

  3. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  6. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. NODE.JS学习的常见误区及四大名著

    NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...

  9. Node.js学习系列总索引

    Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...

  10. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

随机推荐

  1. LNMP+Redis

    如果要让php支持redis需要安装php-redis模块.可以再github上下载哦. https://github.com/phpredis/phpredis 配置lnmp环境,太简单了就不演示了 ...

  2. [考试反思]0907NOIP模拟测试39：角落

    题比较简单,但是做的非常烂. T1是个愚蠢的找规律组合数快速幂,数组开小了(看错数据范围) T2题目保证联通没看见,hack掉了正解. T3也挺蠢的,但是打乱了,思路不是很清晰导致丢了50分. 只能说 ...

  3. [考试反思]0803NOIP模拟测试12：偿还

    嗯,rank5.没什么可评价的,高不算高低不算低. 一套好题,被我浪费了. 离上面280的大神差的有点远. 分机房的绝响就要来临. 越来越感觉自己变菜了,整体的能力水平在下滑. 说的不只是考试,包括平 ...

  4. solr 本地搭建

      1. 运行 D:\solr-4.7.2\example --> java -jar start.jar   2. 添加插件IK D:\solr-4.7.2\example\solr-weba ...

  5. RabbitMQ 的高可用集群

    RabbitMQ 的高可用性 RabbitMQ 是比较有代表性的,因为是基于主从(非分布式)做高可用的 RabbitMQ 有三种模式:单机模式.普通集群模式.镜像集群模式. 单机模式 单机模式,生产几 ...

  6. vue 封装方法

    个我这个是局部引入方法,下次有需要全局在补上(全局:在main.js文件引入封装的方法js文件,然后用Vue.prototype) 一.新建一个js文件loading.js 二.编辑loading.j ...

  7. 【Linux】Debian 下安装 Apache,MySQL,PHP

    首先,对你的源进行更新: $ sudo apt-get update 第一步--安装 Apache Apache 是一个开源软件,它目前运行在全球超过 50% 的服务器上,是 LAMP(Linux,A ...

  8. PHP Laravel5实现的RBAC权限管理操作示例

    根据不同的权限,在菜单栏显示不同的功能,只对菜单进行了限制,若对路由也进行限制,可以根据菜单的例子,请自行完善,开发.下面请认真学习一下laravel的RBAC设计 1.建表(用户表.角色表.权限表. ...

  9. window,sts安装python

    1.先在python官网下载最新的python安装,安装的时候勾上所有选项 官网:https://www.python.org/downloads/ 2.在sts里安装pyDev插件,我当时直接sea ...

  10. nyoj 32-组合数(next_permutation, stack, set)

    32-组合数 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:8 submit:11 题目描述: 找出从自然数1.2.... .n(0<n< ...