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"});

  • 相关阅读:
    这篇通俗实用的Vlookup函数教程,5分钟就可以包你一学就会
    nginx 常见正则匹配符号表示
    Nginx if 条件判断
    nginx 将请求全部指向到一个页面
    windows10下面部署nginx(解决文件名中文乱码问题)
    二.Nginx反向代理和静态资源服务配置
    Nginx的使用(一)代理静态文件
    使用Nginx反向代理和内容替换模块实现网页内容动态替换功能
    如何让NGINX显示文件夹目录
    Nginx 如何设置反向代理 多服务器,配置区分开来,单独文件保存单个服务器 server 主机名配置,通过 include 实现
  • 原文地址:https://www.cnblogs.com/ken-admin/p/6405770.html
Copyright © 2011-2022 走看看