js表格自动隔行变色-阿里云开发者社区

js表格自动隔行变色

2016-05-12 1947

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

   Css代码  
    
  
tr.odd td {  
    color: #223;  
    background-color: #ec8;  
}  
tr.highlight td {  
    color: #223;  
    background-color: #e3e3e3;  
}   

asda

   Java代码  
    
  
/** 
* 隔行换色，鼠标移动上色 
* Create by phoenix @ 2013-11-19 
*/  
  
(function ($) {  
    $.fn.tabChColor = function (options) {  
        var options = options || {};  
          
        $(this).find('tr:even').addClass('smallblack');  
          
        $(this).find('tr').hover(  
            function () {  
                $(this).addClass('overcolor');  
            },  
            function () {  
                $(this).removeClass('overcolor');  
            }  
        );  
    }  
})(jQuery);  

   Java代码  
    
  
//表格自动隔行变色，要变色的表格加上id属性  
function stripeTables() {  
    if (!document.getElementsByTagName) return false;  
    var tables = document.getElementsByTagName("table");  
    for (var i=0; i<tables.length; i++) {  
        var odd = false;  
        //alert(tables.length);  
        if(tables[i].id){ //加id属性的显示  
            var rows = tables[i].getElementsByTagName("tr");  
            for (var j=0; j<rows.length; j++) {  
                //alert(rows.length);  
                if (odd == true) {  
                    addClass(rows[j],"odd");  
                    odd = false;  
                }else {  
                    odd = true;  
                }     
            }  
        }  
    }  
}  
//表格自动高亮显示光标所在行  
function highlightRows() {  
    if (!document.getElementsByTagName) return false;  
    var tables = document.getElementsByTagName("table");  
    for (var i=0; i<tables.length; i++) {  
        if(tables[i].id){ //加id属性的显示  
            var rows = tables[i].getElementsByTagName("tr");  
            for (var j=0; j<rows.length; j++) {  
                rows[j].oldClassName = rows[j].className;  
                rows[j].onmouseover = function() {  
                    addClass(this,"highlight");   
                }  
                rows[j].onmouseout = function() {  
                    this.className = this.oldClassName;   
                }     
            }  
        }  
    }  
}  
  
addLoadEvent(stripeTables);  
addLoadEvent(highlightRows);  
  
//点击tr后将tr所在的checkbox改变，  
var old_row_bg;  
var selected_row;  
function selectRow(comp,setTo,value){      
    if(selected_row!=null){  
        selected_row.style.backgroundColor=old_row_bg;  
    }  
    selected_row=comp;  
    old_row_bg=comp.style.backgroundColor;  
    comp.style.backgroundColor="#FFFF55";  
    document.getElementById(setTo).checked=!document.getElementById(setTo).checked;  
}  

js表格自动隔行变色

热门文章

最新文章

相关课程

相关电子书

相关实验场景