`
jxqc_job
  • 浏览: 529 次
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
javascript与jquery 控制表格行的字体与背景色 javascript与jquery 控制表格行的字体与背景色
javascript与jquery 控制表格行的字体与背景色 博客分类: javascript
JavaScriptjQueryCSS .
Js代码  
1.<script type="text/javascript">   
2.    window.onload=function(){   
3.        var table=document.getElementById("tb");   
4.        var tboby=table[0];   
5.        var trs=document.getElementsByTagName("tr");   
6.        for(var i=0;i<trs.length;i++){   
7.            if(i%2==0){   
8.                trs[i].style.color="#3333ff";  //设置偶数行字体的颜色   
9.            }else{   
10.                trs[i].style.background="#99ffff"; //设置奇数行的背景色   
11.            }   
12.        }   
13.    };   
14.</script>   
15.</head>   
16.<body>   
17.<table id="tb">   
18.    <tbody>   
19.        <tr><td>第一行</td><td>第一行</td></tr>   
20.        <tr><td>第二行</td><td>第二行</td></tr>   
21.        <tr><td>第三行</td><td>第三行</td></tr>   
22.        <tr><td>第四行</td><td>第四行</td></tr>   
23.        <tr><td>第五行</td><td>第五行</td></tr>   
24.        <tr><td>第六行</td><td>第六行</td></tr>   
25.    </tbody>   
26.</table>   
27.</body>  
<script type="text/javascript">
    window.onload=function(){
        var table=document.getElementById("tb");
        var tboby=table[0];
        var trs=document.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            if(i%2==0){
                trs[i].style.color="#3333ff";  //设置偶数行字体的颜色
            }else{
                trs[i].style.background="#99ffff"; //设置奇数行的背景色
            }
        }
    };
</script>
</head>
<body>
<table id="tb">
    <tbody>
        <tr><td>第一行</td><td>第一行</td></tr>
        <tr><td>第二行</td><td>第二行</td></tr>
        <tr><td>第三行</td><td>第三行</td></tr>
        <tr><td>第四行</td><td>第四行</td></tr>
        <tr><td>第五行</td><td>第五行</td></tr>
        <tr><td>第六行</td><td>第六行</td></tr>
    </tbody>
</table>
</body>  
注:  设置行的背景色也可以这样写   trs[i].style.backgroundColor ="#99ffff"; //设置偶数行的背景色 

 

 

下面是jquery实现相同的功能

Js代码  
1.<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>   
2.<script type="text/javascript">   
3.    $(function(){   
4.        $("#tb tbody tr:even").css("color","#3333ff");   
5.        $("#tb tbody tr:odd").css("background","#99ffff");   
6.    });   
7.</script>   
8.</head>   
9.<body>   
10.<table id="tb">   
11.<tbody>   
12.<tr><td>第一行</td><td>第一行</td></tr>   
13.<tr><td>第二行</td><td>第二行</td></tr>   
14.<tr><td>第三行</td><td>第三行</td></tr>   
15.<tr><td>第四行</td><td>第四行</td></tr>   
16.<tr><td>第五行</td><td>第五行</td></tr>   
17.<tr><td>第六行</td><td>第六行</td></tr>   
18.</tbody>   
19.</table>   
20.</body>   
21.  
22.注: 这里当然也可以写    
23.$("#tb tbody tr:odd").css("backgroundColor","#99ffff");   
Global site tag (gtag.js) - Google Analytics