1. <!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{
  2.  
  3.         }
        </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++){
  4.  
  5.                 }
                }
            }
        </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>
  6.  
  7.     <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>
  8.  
  9. </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. [考试反思]0920csp-s模拟测试48：弱小

    注:T1全场46个人里42个AC了. %%%zkt也AK了呢越来越强啊 我是真的越来越弱了吗? 我到底在干什么... 在难度递增的题里分数递增... 考试过程大体还好,但是如此快速地WA掉T1也真是蠢 ...

  2. hadoop2.6集群环境搭建

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一.环境说明 1.机器:一台物理机 和一台虚拟机 2.Linux版本:[Spark@S1PA11 ~]$ cat /etc/issueRed Ha ...

  3. 大数据之路day01_2--记事本与EditPlus编写Hello World并且运行

    在上一节我们成功的安装JAVA并且将其环境配置成功,接下来我们来编写第一个java程序——Hello World 1.利用记事本编写代码,利用命令行来编译运行 (1)新建记事本,(文件名).java后 ...

  4. 你了解MySQL中的锁吗？

    MySQL中的锁,分为全局锁.表级锁.行锁 全局锁 全局锁的意思就是,对整个数据库实例加锁,它的命令是FTWRL Flash tables with read lock 这个命令的语义是,使整个库处于 ...

  5. php Yaf_Loader::import引入文件报错的解决方法

    php Yaf_Loader::import引入文件报错的解决方法 改下配置文件就行<pre>yaf.use_spl_autoload=1</pre> 也可以PHP动态修改 毕 ...

  6. mysql group by分组查询后 查询个数

    mysql group by分组查询后 查询个数2个方法随便你选 <pre>select count(distinct colA) from table1;</pre>< ...

  7. 【html css js】实现一个简易日历

    ——[效果预览] 实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. ——[代码部分] 1. HTML <body> <div class=&q ...

  8. 微擎签名出错 invalid signature

    微擎签名出错 错误信息: config:fail,Error: 系统错误,错误码:63002,invalid signature 修改方法: PHP 端 $account_api = WeAccoun ...

  9. python：爬虫2——隐藏自己

    一.添加浏览器 方法一: head['User-Agent'] = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, li ...

  10. 原生js实现简单的下拉加载

    #获取当前滚动条的高度document.documentElement.scrollTop #获取当前窗口的高度 document.documentElement.clientHeight #获取当前 ...