zoukankan      html  css  js  c++  java
  • Js控制样式的诸多方法

    function TableCss(options){

    //如果没参数,就退出

            if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;}

    //参数及默认参数

            var options = {

                    tableName : options.tableName,

                    evenClass : options.evenClass || "tr_even",

                    oddClass   : options.oddClass || "tr_odd",

                    clickClass  : options.clickClass || "tr_click",

                    hoverClass: options.hoverClass || "tr_hover"

                    }

    //根据ID找到表格元素

            var tableName = document.getElementById(options.tableName);

            var tr = tableName.getElementsByTagName("tr");

    //对TR元素循环设置

            for(var i=0, len=tr.length; i<len; i++){

    //用了闭包

                    (function(k){

                            //设置奇偶行样式          

                            tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

    //点击样式

                            tr[k].onclick = function(){

                                    if (tr[k].className == options.clickClass){

                                            tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

                                    }

                                    else {

                                            tr[k].className = options.clickClass;

                                    }

                            }

                            //鼠标HOVER样式,如果已经是点击样式,则不变化

                            tr[k].onmouseover = function(){

                                    if(tr[k].className == options.clickClass ){ return false;}

                                    else { tr[k].className = options.hoverClass;}

                            }

                            tr[k].onmouseout = function(){  

                                    if(tr[k].className == options.clickClass){ return false;}

                                    else {  

    tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

    }

                            }

                            

                            

                     })(i)

            }

    }

    //调用

    TableCss({tableName:"tb1"});

  • 相关阅读:
    ElasticSearch关闭重启命令
    解决使用驱动器中的光盘之前需要将其格式化
    mac利用Synergy操作多台电脑
    一次真实的蓝屏分析 ntkrnlmp.exe
    JS字符串false转boolean
    启明星会议室预定系统更新日志-通用版
    利用Visual Studio 2013 开发微软云Windows Azure配置指南(针对中国大陆)
    利用Bootstrap+Avalonjs+EntityFramework 开发ASP.NET WebForm应用程序(上)
    启明星会议室系统与Office365集成说明
    jQuery中attr和prop方法的区别说明
  • 原文地址:https://www.cnblogs.com/ken-admin/p/6405770.html
Copyright © 2011-2022 走看看