◆◆◆◆◆我就不信没有明白人：表格交替颜色问题，数据来自嵌入html的xml数据岛
表格交替颜色问题，数据来自嵌入html的xml数据岛， < 不用xsl>
下面html代码，第一个表格数据来自数据岛， 没有交替颜色。
怎么处理才能有颜色交替效果？？？？
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<xml id='DesignDataSource3'>
<?xml version="1.0" encoding="GB2312"?>
<ROWS>
<ROW>
<ID>1</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>中文</SUBJECT>
<MARK>90</MARK>
</ROW>
<ROW>
<ID>2</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>数学</SUBJECT>
<MARK>89</MARK>
</ROW>
<ROW>
<ID>3</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>自然</SUBJECT>
<MARK>87.5</MARK>
</ROW>
<ROW>
<ID>4</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>地理</SUBJECT>
<MARK>95</MARK>
</ROW>
<ROW>
<ID>5</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>历史</SUBJECT>
<MARK>86</MARK>
</ROW>
<ROW>
<ID>6</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>文学</SUBJECT>
<MARK>81</MARK>
</ROW>
<ROW>
<ID>7</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>逻辑设计</SUBJECT>
<MARK>91</MARK>
</ROW>
<ROW>
<ID>8</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>美术</SUBJECT>
<MARK>73</MARK>
</ROW>
<ROW>
<ID>9</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>音乐</SUBJECT>
<MARK>85.2</MARK>
</ROW>
<ROW>
<ID>10</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>数据结构</SUBJECT>
<MARK>95.5</MARK>
</ROW>
</ROWS>
</xml>
<style type='text/css'>
tr{
background-color:expression((this.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
td{
background-color:expression((this.parentElement.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
div{
background-color:expression((this.parentElement.parentElement.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
</style>
</head>
<body >
<table datasrc='#DesignDataSource3' border='1'>
<tr >
<td >
<div datafld='ID'></div>
</td>
<td >
<div datafld='STUDENT_ID'></div>
</td>
<td >
<div datafld='SUBJECT'></div>
</td>
<td >
<div datafld='MARK' ></div>
</td>
</tr>
</table>
<hr>
<table border='1'>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
</table>
</body>
</html>
问题点数：100、回复次数：25Top
1 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 13:33:22 得分 45
你expression里面判断只是看rowIndex%2，而下面这里明显就是一行，所以不可能变色的
<tr >
<td >
<div datafld='ID'></div>
</td>
<td >
<div datafld='STUDENT_ID'></div>
</td>
<td >
<div datafld='SUBJECT'></div>
</td>
<td >
<div datafld='MARK' ></div>
</td>
</tr>Top
2 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 13:34:10 得分 0
假如你改成这样：你看看变不变色？
<table datasrc='#DesignDataSource3' border='1'>
<tr >
<td >
<div datafld='ID'></div>
</td>
<td >
<div datafld='STUDENT_ID'></div>
</td>
<td >
<div datafld='SUBJECT'></div>
</td>
<td >
<div datafld='MARK' ></div>
</td>
</tr>
<tr >
<td >
<div datafld='ID'></div>
</td>
<td >
<div datafld='STUDENT_ID'></div>
</td>
<td >
<div datafld='SUBJECT'></div>
</td>
<td >
<div datafld='MARK' ></div>
</td>
</tr>
</table>Top
3 楼wilowind（杂而不精）回复于 2006-06-08 13:43:46 得分 0
改成2行倒是变色，可没什么意义。 显示了2份数据。
Top
4 楼wilowind（杂而不精）回复于 2006-06-08 13:50:33 得分 0
方法倒是有一个， 跟踪js代码发现tr的rowIndex能正确显示行号，故可以用js在html装载完数据后遍历表格行，改变颜色。 虽然没测试过， 应该是没问题的。
但我觉得太麻烦，想知道有没有简单的办法。Top
5 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 13:59:44 得分 0
你要一行里binding数据之后也会变色吗？有办法的。Top
6 楼wilowind（杂而不精）回复于 2006-06-08 14:14:23 得分 0
正如你说的，有什么办法？Top
7 楼DeluxWorld（曾经的你）回复于 2006-06-08 14:18:05 得分 5
好象没有什么简单的方法~
遍历表格行到是可行Top
8 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 14:24:33 得分 0
==，我在把想法实践一下，否则不行的话，那就出笑话了：DTop
9 楼meizz（梅花雪）回复于 2006-06-08 14:25:56 得分 45
这个问题可能是渲染的前后顺序有关。即在数据绑定之前，表格里只有一行，CSS对表格进行了单色的渲染，之后数据绑定操作，（不知是完全拷贝这个第一行的渲染效果还是其它什么原因），后续添加的行只延用了第一行的样式。这个问题可能与浏览器系统有关，我无力改写其代码，不过针对这种现象还是有办法可以补救的，就是让CSS的渲染动作发生成数据绑定之后：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<xml id='DesignDataSource3'>
<?xml version="1.0" encoding="GB2312"?>
<ROWS>
<ROW>
<ID>1</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>中文</SUBJECT>
<MARK>90</MARK>
</ROW>
<ROW>
<ID>2</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>数学</SUBJECT>
<MARK>89</MARK>
</ROW>
<ROW>
<ID>3</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>自然</SUBJECT>
<MARK>87.5</MARK>
</ROW>
<ROW>
<ID>4</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>地理</SUBJECT>
<MARK>95</MARK>
</ROW>
<ROW>
<ID>5</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>历史</SUBJECT>
<MARK>86</MARK>
</ROW>
<ROW>
<ID>6</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>文学</SUBJECT>
<MARK>81</MARK>
</ROW>
<ROW>
<ID>7</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>逻辑设计</SUBJECT>
<MARK>91</MARK>
</ROW>
<ROW>
<ID>8</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>美术</SUBJECT>
<MARK>73</MARK>
</ROW>
<ROW>
<ID>9</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>音乐</SUBJECT>
<MARK>85.2</MARK>
</ROW>
<ROW>
<ID>10</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>数据结构</SUBJECT>
<MARK>95.5</MARK>
</ROW>
</ROWS>
</xml>
<style type='text/css'>
.mm tr
{
background-color:expression((this.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
.mm td
{
background-color:expression((this.parentElement.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
</style>
</head>
<body onload="document.getElementById('Tab').className='mm'">
<table id="Tab" datasrc='#DesignDataSource3' border='1'>
<tr >
<td >
<div datafld='ID'></div>
</td>
<td >
<div datafld='STUDENT_ID'></div>
</td>
<td >
<div datafld='SUBJECT'></div>
</td>
<td >
<div datafld='MARK' ></div>
</td>
</tr>
</table>
<hr>
<table class="mm" border='1'>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
<tr >
<td >
<div>123</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
<td >
<div>234</div>
</td>
</tr>
</table>
</body>
</html>Top
10 楼coder1（穿上防砖马甲和党员干部打成一片）回复于 2006-06-08 14:29:55 得分 5
帮顶Top
11 楼wilowind（杂而不精）回复于 2006-06-08 14:38:22 得分 0
meizz(梅花雪) 对原理分析的比较清楚， 方法也是可行的。 比我的遍历行高明多了。
再等等，看BlueDestiny(www.never-online.net) 有没有什么其他好的方法。
不久揭帖Top
12 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 14:44:48 得分 0
的确，未binding前的数据row.length为1，onload后，数据岛自动会生动tr,td等标签，有点像.net里面的控件，我想过很多方法想来实现不用遍历就可以得出的方法，但目前为止还没有得到答案，如果要expression的话，
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<xml id='DesignDataSource3'>
<?xml version="1.0" encoding="GB2312"?>
<ROWS>
<ROW>
<ID>1</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>中文</SUBJECT>
<MARK>90</MARK>
</ROW>
<ROW>
<ID>2</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>数学</SUBJECT>
<MARK>89</MARK>
</ROW>
<ROW>
<ID>3</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>自然</SUBJECT>
<MARK>87.5</MARK>
</ROW>
<ROW>
<ID>4</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>地理</SUBJECT>
<MARK>95</MARK>
</ROW>
<ROW>
<ID>5</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>历史</SUBJECT>
<MARK>86</MARK>
</ROW>
<ROW>
<ID>6</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>文学</SUBJECT>
<MARK>81</MARK>
</ROW>
<ROW>
<ID>7</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>逻辑设计</SUBJECT>
<MARK>91</MARK>
</ROW>
<ROW>
<ID>8</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>美术</SUBJECT>
<MARK>73</MARK>
</ROW>
<ROW>
<ID>9</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>音乐</SUBJECT>
<MARK>85.2</MARK>
</ROW>
<ROW>
<ID>10</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>数据结构</SUBJECT>
<MARK>95.5</MARK>
</ROW>
</ROWS>
</xml>
</head>
<body >
<style>
<!--
table {
never-online:expression(onreadystatechange=function() {
if(this.getAttribute("datasrc")) {
if(this.readyState=="complete") {
for(var i=0; i<this.rows.length; i++) {
rows[i].style.backgroundColor = (i%2==0) ? "#006600" : "#009900";
rows[i].style.color = "#fff";
}
}
}
});
}
-->
</style>
<table datasrc='#DesignDataSource3' border='1' id="tblDs">
<tr >
<td >
<div datafld='ID'></div>
</td>
<td >
<div datafld='STUDENT_ID'></div>
</td>
<td >
<div datafld='SUBJECT'></div>
</td>
<td >
<div datafld='MARK' ></div>
</td>
</tr>
</table>
</body>
</html>
Top
13 楼dh20156（风之石）回复于 2006-06-08 14:49:58 得分 0
支持梅花雪的意见！Top
14 楼meizz（梅花雪）回复于 2006-06-08 14:50:59 得分 0
BlueDestiny 与其你在CSS里写这么多的代码，还不如直接写个HTC来得清爽Top
15 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 14:51:58 得分 0
不过现在又有个想法，用expression 判断是否载入完毕，如果是的话，自动把rows的className绑到table上，也就是结合meizz的styel class
我试试看。wait a moment...Top
16 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 14:53:04 得分 0
meizz
呵呵，我是看楼主喜欢expression，所以也就写了个expression，只是技术讨论，见笑了。:DTop
17 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 14:59:58 得分 0
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<xml id='DesignDataSource3'>
<?xml version="1.0" encoding="GB2312"?>
<ROWS>
<ROW>
<ID>1</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>中文</SUBJECT>
<MARK>90</MARK>
</ROW>
<ROW>
<ID>2</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>数学</SUBJECT>
<MARK>89</MARK>
</ROW>
<ROW>
<ID>3</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>自然</SUBJECT>
<MARK>87.5</MARK>
</ROW>
<ROW>
<ID>4</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>地理</SUBJECT>
<MARK>95</MARK>
</ROW>
<ROW>
<ID>5</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>历史</SUBJECT>
<MARK>86</MARK>
</ROW>
<ROW>
<ID>6</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>文学</SUBJECT>
<MARK>81</MARK>
</ROW>
<ROW>
<ID>7</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>逻辑设计</SUBJECT>
<MARK>91</MARK>
</ROW>
<ROW>
<ID>8</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>美术</SUBJECT>
<MARK>73</MARK>
</ROW>
<ROW>
<ID>9</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>音乐</SUBJECT>
<MARK>85.2</MARK>
</ROW>
<ROW>
<ID>10</ID>
<STUDENT_ID>1</STUDENT_ID>
<SUBJECT>数据结构</SUBJECT>
<MARK>95.5</MARK>
</ROW>
</ROWS>
</xml>
</head>
<body >
<style>
<!--
table {
never-online:expression(onreadystatechange=function(){this.readyState=="complete" ? this.className = "mm" : "";});
}
.mm tr
{
background-color:expression((this.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
.mm td
{
background-color:expression((this.parentElement.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
-->
</style>
<table datasrc='#DesignDataSource3' border='1' id="tblDs">
<tr >
<td >
<div datafld='ID'></div>
</td>
<td >
<div datafld='STUDENT_ID'></div>
</td>
<td >
<div datafld='SUBJECT'></div>
</td>
<td >
<div datafld='MARK' ></div>
</td>
</tr>
</table>
</body>
</html>
Top
18 楼wilowind（杂而不精）回复于 2006-06-08 15:02:11 得分 0
好，有如此多的好想法， 我得好好看看， 哪个适合我的情况。Top
19 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 15:02:20 得分 0
在expression里table的onload事件不会触发，所以只有用onreadystatechange来绑在CSS上了Top
20 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-08 15:02:33 得分 0
在expression里table的onload事件不会触发，所以只有用onreadystatechange来绑在CSS上了Top
21 楼wilowind（杂而不精）回复于 2006-06-08 15:23:00 得分 0
不错，2种方法，异曲同工。
我的问题应该是解决了。
揭帖。Top
22 楼wilowind（杂而不精）回复于 2006-06-08 15:25:44 得分 0
我更偏向于用class， 因为一个页面不止一个这样的table，且table的id事先是不确定的。Top
23 楼wilowind（杂而不精）回复于 2006-06-08 15:27:47 得分 0
或者getElementByName也是可以的。Top
24 楼theforever（碧海情天）回复于 2006-06-09 10:04:33 得分 0
MARKTop
25 楼fest（fest）回复于 2006-06-09 12:01:32 得分 0
markTop
