用JS實現(xiàn)表格中隔行顯示不同顏色

第一種：
<style>
tr{bgColor:expression(
??? this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow');
}
</style>
<table id="oTable" width="100" border="1" style="border-collapse:collapse;">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>

第二種：
<script language="javascript">
???? var oTable = document.all['oTable'];
???? for(var i=0;i<oTable.rows.length;i ){
????????? oTable.rows[i].bgColor = (i%2==0) ? 'white' : 'yellow' ;
???? }
</script>
<table id="oTable" width="100" border="1" style="border-collapse:collapse;">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>

第三種（第二種的改進版）：
用布兒變量替代之：內(nèi)存換時間
var isToggled = false;

var oTable = document.all['oTable'];
for(var i=0;i<oTable.rows.length;i ){
??? isToggled = ! isToggled;
??? oTable.rows[i].bgColor = isToggled ? "white" : "yellow" ;?????????
}


鼠標(biāo)經(jīng)過時改變背景顏色
<table><tr><td width="100" height="100" οnmοuseοver="style.backgroundColor='#C86F70'" οnmοuseοut="style.backgroundColor='#DDC676'" bgcolor="#DDC676">ihandu</td></tr></table>


我的方法一：
<!--<script language="javascript">
??? window.onload = function(){?? //表格隔行顯示不同顏色
????? var tab = document.getElementById('tab');
????? for(var i=0;i<tab.rows.length;i ){
????????? tab.rows[i].bgColor = (i%2==0) ? 'white' : '#e6e6e6' ;
???? }
??? }
</script>
? -->


我的方法二：
<tr height = "22px" align=center style="c:if test='${status.count%2==0}'>#FFFFFF</c:if><c:if test='${status.count%2!=0}'>#E6E6E6</c:if>" >?

?

附：

<script src="jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
SetTableRowColor();

});
//用CSS控制奇偶行的顏色
function SetTableRowColor()
{

$("#Table tr:odd").css("background-color", "#e6e6fa");
$("#Table tr:even").css("background-color", "#fff0fa");
}
</scirpt>?

?

總結(jié)

以上是生活随笔為你收集整理的（转）用JS实现表格中隔行显示不同颜色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。