|
制作页面，有时为了摆脱表格行与行之间单调颜色的显示，追求一种简单视觉效果，要求每行之间以不同颜色显示。一般制作时，都以手工隔行调节色系，这样就会出现管理表格极为不方便。解决的方法就是使用javascript或CSS来控制。
方法一：
１、在<head></head>间插入CSS样式，代码：
.t1 {background-color:#336699}
.t2 {background-color:#ffcc00}
其中，#336699与#ffcc00为每行间的颜色值。
２、使用Dreamweaver插入表格。并给表格赋予ID值：<table id="table1">
３、在表格<table>...</table>代码下，插入javascript代码：
<script Language="javascript1.2">
for (i=0;i<table1.rows.length;i++) {
(i%2==0)?(table1.rows(i).className = "t1"):(table1.rows(i).className = "t2");
}
</script>
演示效果：
方法二：
在你的CSS里面加入
tr{
background-color:expression("#f4fcff,#FfFfFf".split(",")[rowIndex%2])
}
演示效果：
也可以这样，使你可以选择性的将某一个表格变色，而不是全部：
.mytr{
background-color:expression("#f4fcff,#FfFfFf".split(",")[rowIndex%2])
然后将你要变色的表格CLASS设置为MYTR即可！
方法三：
----------------------------------
将下面代码置于</head>前面
<SCRIPT LANGUAGE="javascript">
window.onload = function() {
doubleBgColor(document.getElementById("table1"),"#ececec","#ffffff")
}
function doubleBgColor(Table,Bg1,Bg2) {
for (var i=1;i<Table.rows.length;i++) Table.rows.bgColor=i%2?Bg2:Bg1;
}
</SCRIPT>
然后在TABLE属性里加一个ID和上面的对上就可以了，如：
<table width="760" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000" id="table1">
把这句改为：
for (var i=0;i<Table.rows.length;i++) Table.rows.bgColor=i%2?Bg2:Bg1;
后效果就如图了
最上面那一行就受到代码的控制，不能显示自定义的颜色了。
|
下载中心
先飞电脑技术网 →
技术文章 → 网站建设 → 布局配色
版权声明：本站提供的“网页表格交替变色的几种方法”版权归文章所有者，转载请注明出处！
