怎样让表格隔行显示背景色?该如何处理
日期：2014-05-16 浏览次数：20375 次
怎样让表格隔行显示背景色?
表格第一行背景色黑色
表格第二行背景色白色
表格第三行背景色黑色
表格第四行背景色白色
......
....
..
.
如果用程序的话,我知道怎么设置,但不知道JS有没有更简单的处理方法没?
如果JS语句少的话,想打算直接用JS了,就不用程序了.
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 背景交替显示 </title>
<script language= "javascript ">
function changbgcolor(){
var objrows=document.getElementsByTagName( "tr ");
var i=0;
while(objrows.item(i)){
if(i%2==0)
objrows.item(i).style.backgroundColor= "#000000 ";
i++;
}
}
</script>
</head>
<body onload= "changbgcolor() ">
<table width= "344 " border= "1 " align= "center ">
<tr>
<td width= "103 "> </td>
<td width= "117 "> </td>
<td width= "102 "> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
在ie和firefox下调试通过
------解决方案--------------------
表格间隔行换色
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 ">
<title> </title>
<style type= "text/css ">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)? "red ": "blue ")}
-->
</style>
</head>
<body>
<TABLE>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
</TABLE>
</body>
</html>
表格第一行背景色黑色
表格第二行背景色白色
表格第三行背景色黑色
表格第四行背景色白色
......
....
..
.
如果用程序的话,我知道怎么设置,但不知道JS有没有更简单的处理方法没?
如果JS语句少的话,想打算直接用JS了,就不用程序了.
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 背景交替显示 </title>
<script language= "javascript ">
function changbgcolor(){
var objrows=document.getElementsByTagName( "tr ");
var i=0;
while(objrows.item(i)){
if(i%2==0)
objrows.item(i).style.backgroundColor= "#000000 ";
i++;
}
}
</script>
</head>
<body onload= "changbgcolor() ">
<table width= "344 " border= "1 " align= "center ">
<tr>
<td width= "103 "> </td>
<td width= "117 "> </td>
<td width= "102 "> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
在ie和firefox下调试通过
------解决方案--------------------
表格间隔行换色
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 ">
<title> </title>
<style type= "text/css ">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)? "red ": "blue ")}
-->
</style>
</head>
<body>
<TABLE>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
<TR> <TD> 1 </TD> </TR>
</TABLE>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
