javascript与jquery 控制表格行的字体与背景色

<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实现相同的功能

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("#tb tbody tr:even").css("color","#3333ff");
		$("#tb tbody tr:odd").css("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>

注: 这里当然也可以写 
$("#tb tbody tr:odd").css("backgroundColor","#99ffff"); 

你可能感兴趣的:(JavaScript,jquery,css)