JS对表单中的style的操作,包括复选框技术

废话不多说直接上文件代码!!!

功能:全选\反选,鼠标监测变颜色

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <table border="1"  width="900px" align="center">

            <tr align="center" >

                <th ><input type="checkbox" id="selAll"/>全选/全不选</th>

                <th >序号</th>

                <th >分类名称</th>

                <th >分类描述</th>

                <th >操作</th>

            </tr>

            <tr>

                <td ><input type="checkbox" name="cname"/></td>

                <td >1</td>

                <td >手机数码</td>

                <td >手机数码商品类</td>

                <td ><a href="">修改  </a><a href="">  删除</a>

                    </td>

            </tr>

            <tr>

                <td ><input type="checkbox" name="cname"/></td>

                <td >2</td>

                <td >手机数码</td>

                <td >手机数码商品类</td>

                <td ><a href="">修改  </a><a href="">  删除</a>

                    </td>

            </tr>

            <tr>

                <td ><input type="checkbox" name="cname"/></td>

                <td >3</td>

                <td >手机数码</td>

                <td >手机数码商品类</td>

                <td ><a href="">修改  </a><a href="">  删除</a>

                    </td>

            </tr>

            <tr id>

                <td ><input type="checkbox" name="cname"/></td>

                <td >4</td>

                <td >手机数码</td>

                <td >手机数码商品类</td>

                <td ><a href="">修改  </a><a href="">  删除</a>

                    </td>

            </tr>

            <tr >

                <td ><input type="checkbox" name="cname"/></td>

                <td >5</td>

                <td >手机数码</td>

                <td >手机数码商品类</td>

                <td ><a href="">修改  </a><a href="">  删除</a>

                    </td>

            </tr>

            <tr >

                <td ><input type="checkbox" name="cname"/></td>

                <td >6</td>

                <td >手机数码</td>

                <td >手机数码商品类</td>

                <td ><a href="">修改  </a><a href="">  删除</a>

                    </td>

            </tr>

        </table>

    </body>

    <script type="text/javascript">

        var color = "";

        /*加载所有页面*/

        window.onload = function(){

            var trs = document.getElementsByTagName("tr")

            for(var i = 0; i < trs.length ; i++){

                if(i % 2){

                    trs[i].style.backgroundColor = "darkgrey";

                }

            }

            for(var i = 0; i < trs.length;i++){

                trs[i].onmouseover = function(){

                    color = this.style.backgroundColor;

                    this.style.backgroundColor = "green";

                    /*trs[i].style.backgroundColor = "darkslateblue";*/

                }

                trs[i].onmouseout = function(){

                    this.style.backgroundColor = color;

                }

            }

        /*为selAll复选框绑定点击事件*/

            var selAllObj = document.getElementById("selAll");

            selAllObj.onclick = function() {

                //判断selAll复选框选中状态

                if(this.checked) {

                    //如果当前的复选框是处于不选中状态，获取到所有非selAll复选框，返回数组，遍历数组为数组中的每个复选框设置checked=true

                    //通过各个表单组件的class属性的值来获取一组表单组件

                    //document.getElementsByClassName("");

                    //通过各个表单组件的name属性的值来获取一组表单组件

                    var checkboxes = document.getElementsByName("cname");

                    for(var i = 0; i < checkboxes.length; i++) {

                        checkboxes[i].checked = true;

                    }

                } else {

                    //如果当前的复选框是处于选中状态，获取到所有非selAll复选框，返回数组，遍历数组为数组中的每个复选框设置checked=false

                    var checkboxes = document.getElementsByName("cname");

                    for(var i = 0; i < checkboxes.length; i++) {

                        checkboxes[i].checked = false;

                    }

                }

            }

            //为所有的name为cname的复选框绑定点击事件

            var checkboxes = document.getElementsByName("cname");

            //所有的name为cname的复选框个数

            var allLength=checkboxes.length;

            //存放选中的复选框个数

            var length02=0;

            for(var i=0;i<checkboxes.length;i++){

                checkboxes[i].onclick=function(){

                    if(this.checked){

                        length02++;

                    }else{

                        length02--;

                    }

                    console.log(allLength);

                    console.log(length02);

                    if(allLength==length02){

                        document.getElementById("selAll").checked=true;

                    }else{

                        document.getElementById("selAll").checked=false;

                    }

                }

            }

        }

    </script>

</html>

效果图:

JS对表单的操作的更多相关文章

  1. JavaScript学习笔记——对表单的操作

    javascript-对表单的操作实例讲解 <form name="myform" id="form1" action="" meth ...

  2. jQuery对表单的操作

    表单应用 一个表单有3个基本组成部分: 表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法 表单域:包含文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上 ...

  3. js对表单设置了readonly和disabled后的区别

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: 1)Readonly只针对input(text / pa ...

  4. 5.1 《锋利的jQuery》jQuery对表单的操作

    获取焦点和失去焦点改变样式 改变文本框/滚动条高度 复选框应用 下拉框应用 表单验证 tip1: 注意使用<label>的for标签,对应input的id.(for 属性规定 label ...

  5. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  6. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  7. jQuery（6）——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  8. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  9. （十）jQuery对表单、表格的操作

    一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

随机推荐

  1. Topshelf 和 Katana：统一的 Web 和服务体系结构

    Topshelf 和 Katana:统一的 Web 和服务体系结构 Wes McClure 下载代码示例 使用 IIS 托管 ASP.NET Web 应用程序已成为业界标准十年有余.构建此类应用程序的 ...

  2. .NET和Docker ，比翼双飞

    DockerCon 2019本周将在旧金山举行 ,DockerCon 是从业者.贡献者.维护者.开发者和容器生态系统学习.网络和创新的一站式活动. .NET 团队博客发布了<一起使用.NET和D ...

  3. C# 之二进制序列化

    序列化:又称串行化,是.NET运行时环境用来支持用户定义类型的流化的机制.其目的是以某种存储形成使自定义对象持久化,或者将这种对象从一个地方传输到另一个地方. 一般有三种方式:1.是使用BinaryF ...

  4. Codeforces Round #246 (Div. 2) C. Prime Swaps（贪心，数论）

    题目链接:http://codeforces.com/contest/432/problem/C 首先由题意分析出:这些数是从1到n且各不相同,所以最后结果肯定是第i位的数就是i. 采用这样一种贪心策 ...

  5. Linux下系统监控工具nmon使用

    Mongodb安装在Centos7或以上的版本,对于系统的监控方法如下: 1.从\\10.10.10.1\ShareDoc\User\Zchen\linux系统监控下下载2个工具 nmon16e_mp ...

  6. 如何找回未保存过的 Excel 文件？

    如何找回未保存过的 Excel 文件? 同事做了一个文件,未保存直接关闭,正常是找不回来的. 但是 Excel 有一个强大的自动保存功能,对没有保存的文件也可以找回.

  7. 最终还是选择了markdownpad2

    markdownpad2使用 最终 哈哈,最后还是选择了markdownpad2,经过探索才知道这个玩意多么好用. 点击,下载. 碰到的问题 1.win10出现HTML无法渲染得对话框 结果是,官网有 ...

  8. 自己写的工具：把Evernote（印象笔记）的笔记导入到博客（Blog）中

    Evernote是个强大的工具, 这个伴随了我快4年的工具让我积累好多笔记.但是,如何把evernote(印象笔记)中的笔记发布到博客中呢? 自己空闲时候用python 3写了个工具Evernote2 ...

  9. web打印详解

    在B/S模式开发中,打印是个很大的困扰.无论是采用页面直接输出或者引用WORD.DLL也好,都有不足之处. 目前最好的办法就是采用第三方控件,网上流传的打印控件有很多.总结了下推荐几个给大家: 一.首 ...

  10. 编译PHP扩展的通用方法

    以安装swoole扩展为例: 步骤1: wget  pecl.php.net/get/swoole-1.7.21.tgz  (下载swoole打包文件) 步骤2: tar zxvf swoole-1. ...