×

用jQuery给表格隔行上色,让整体看上去有层次感!

作者:yuchen2017.11.22来源:Web前端之家浏览:12000评论:0
关键词:JQueryJS

用jQuery给表格隔行上色,让整体看上去有层次感!

<!DOCTYPE html>
<html> 
<head> 
<style type="text/css"> 
.table-tr-title{ 
height: 26px; 
font-size: 12px; 
text-align: center; 
} 
.table-tr-content{ 
height: 18px; 
background: #FFFFFF; 
text-align: center; 
font-size: 12px; 
} 
.normalEvenTD{ 
background: #DFD8D8; 
} 
.normalOddTD{ 
background: #FFFFFF; 
} 
.hoverTD{ 
background-color: #eafcd5; 
height: 18px; 
text-align: center; 
font-size: 12px; 
} 
.trSelected{ 
background-color: #51b2f6; 
height: 18px; 
text-align: center; 
font-size: 12px; 
} 
</style> 
</head> 
<body> 
<table width="99%" class="list" style="word-break: break-all" border="0" 
align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98"> 
    <tr class="table-tr-title"> 
    <td width="5%">标题</td> 
    <td width="5%">标题</td> 
    <td width="5%">标题</td> 
    <td width="5%">标题</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
</table>
<script type="text/javascript" src="/demo/js/jq.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    ///////datagrid选中行变色与鼠标经过行变色/////////////// 
    var dtSelector = ".list"; 
    var tbList = $(dtSelector); 
    
    tbList.each(function() { 
    var self = this; 
    $("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 从标头行下一行开始的奇数行,行数:(1,3,5...) 
    $("tr:odd", $(self)).addClass("normalOddTD"); // 从标头行下一行开始的偶数行,行数:(2,4,6...) 
    
    // 鼠标经过的行变色 
    $("tr:not(:first)", $(self)).hover( 
    function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); }, 
    function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); } 
    ); 
    
    // 选择行变色 
    $("tr", $(self)).click(function (){ 
        var trThis = this; 
        $(self).find(".trSelected").removeClass('trSelected'); 
        if ($(trThis).get(0) == $("tr:first", $(self)).get(0)){ 
        return; 
        } 
        $(trThis).addClass('trSelected'); 
        }); 
    }); 
}); 
</script> 
</body> 
</html>
效果显示:

您的支持是我们创作的动力!
温馨提示:本文作者系yuchen ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1488211200650.html

网友评论文明上网理性发言 已有0人参与

发表评论: