<!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. 网络安全-主动信息收集篇第二章-三层网络发现之nmap和fping和Hping

    nmap IP  -sn nmap当目标IP在同一网段时,nmap会发送ARP包,当目标IP不在同一网段时nmap会发送ICMP的包. fping IP fping  -g 参数支持对IP地址起始和结 ...

  2. Laravel + Vue + Element 考勤应用 - 人力资源系统

    项目地址 Bee 介绍 Bee 是人力资源系统中的考勤应用,主要功能用于员工申请假单.Bee具有较高的性能.扩展性等,其中包括前后端分离.插拔式的规则验证(验证器).数据过滤(装饰器).消息队列等,后 ...

  3. 跳跳棋——二分+建模LCA

    题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.我们要通过最少的跳动把他们的位置移动 ...

  4. Android so 文件

    要点 不同的 CPU 架构需要不同的 so 文件 NDK平台不是后向兼容的,而是前向兼容的. ABI 的概念,每一个 Cpu架构对应一个 ABI(Application Binary Interfac ...

  5. python——字符串操作函数

    字符串 join() map() split() rsplit() splitlines() partiton() rpartition() upper() lower() swapcase() ca ...

  6. 在VMware环境下安装Windows2008

    1.软硬件安装 软件:推荐使用VMware,这里我使用的是VMware15 镜像:Windows 2008 如果没有镜像可以到这里 链接:https://pan.baidu.com/s/1r_7K-U ...

  7. Go组件学习——Web框架Gin

    以前学Java的时候,和Spring全家桶打好关系就行了,从Spring.Spring MVC到SpringBoot,一脉相承. 对于一个Web项目,使用Spring MVC,就可以基于MVC的思想开 ...

  8. Flink入门（一）——Apache Flink介绍

    Apache Flink是什么? ​ 在当代数据量激增的时代,各种业务场景都有大量的业务数据产生,对于这些不断产生的数据应该如何进行有效的处理,成为当下大多数公司所面临的问题.随着雅虎对hadoop的 ...

  9. java编程思想第四版第十三章字符串 总结

    1. String和StringBulider的使用 通过书中介绍, 我们得知如下结论: 当使用+连接符将字符串进行拼接的时候, 编译器会进行自动优化为使用StringBuilder连接字符串. 当在 ...

  10. Chocolatey初体验

    新电脑安装Nodejs时发现安装包提示是否自动安装Chocolatey,之前没看到过这个名词,于是搜索了下,发现Chocolatey是Windows平台的包管理工具,类似于Linux的yum/apt- ...