IE样式的expression与XML数据岛绑定有点冲突
来源：互联网 发布：淘宝优惠券采集api 编辑：程序博客网 时间：2024/04/30 08:08
先看一段代码，我在样式里用 expression 动态运算，以达到表格的隔行换色效果（注明：样式里的 expression 用法目前只有IE浏览器支持！）：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>expression vs XML data</title>
<style type='text/css'>
.mm tr
{
background-color:expression((this.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
</style>
<xml id='XmlData'>
<?xml version="1.0" encoding="GB2312"?>
<rows>
<row>
<id>1</id>
<area>Web 开发/非技术区</area>
<trend>↑</trend>
<percent>67.23%</percent>
</row>
<row>
<id>2</id>
<area>C/C++/C++ 语言</area>
<trend>↑</trend>
<percent>14.35%</percent>
</row>
<row>
<id>3</id>
<area>Delphi/非技术区</area>
<trend>↑</trend>
<percent>13.88%</percent>
</row>
<row>
<id>4</id>
<area>Oracle/基础和管理</area>
<percent>11.87%</percent>
<trend>↑</trend>
</row>
<row>
<id>5</id>
<area>Windows专区/Windows NT/2000/XP/2003</area>
<percent>8.33%</percent>
<trend>↑</trend>
</row>
<row>
<id>6</id>
<area>.NET技术/非技术区</area>
<percent>7.32%</percent>
<trend>↓</trend>
</row>
<row>
<id>7</id>
<area>Web 开发/JavaScript</area>
<percent>7.24%</percent>
<trend>↑</trend>
</row>
<row>
<id>8</id>
<area>VC/MFC/基础类</area>
<percent>4.80%</percent>
<trend>↑</trend>
</row>
<row>
<id>9</id>
<area>Java/J2EE / EJB / JMS</area>
<percent>3.00%</percent>
<trend>↑</trend>
</row>
<row>
<id>10</id>
<area>扩充话题/灌水乐园</area>
<percent>1.75%</percent>
<trend>↓</trend>
</row>
</rows>
</xml>
</head>
<body>
<table class="mm" id="Tab" datasrc='#XmlData' border='1'>
<tr>
<td><div datafld='id'></div></td>
<td><div datafld='area'></div></td>
<td><div datafld='trend'></div></td>
<td><div datafld='percent'></div></td>
</tr>
</table>
<hr>
下面这个表格是一个测试表格，以测试样式里的 expression 的代码准确性，
<table class="mm" border='1'>
<tr>
<td><div>1111</div></td>
<td><div>2222</div></td>
<td><div>3333</div></td>
<td><div>4444</div></td>
</tr>
<tr>
<td><div>2222</div></td>
<td><div>2222</div></td>
<td><div>3333</div></td>
<td><div>4444</div></td>
</tr>
<tr>
<td><div>3333</div></td>
<td><div>2222</div></td>
<td><div>3333</div></td>
<td><div>4444</div></td>
</tr>
<tr>
<td><div>4444</div></td>
<td><div>2222</div></td>
<td><div>3333</div></td>
<td><div>4444</div></td>
</tr>
</table>
</body>
</html>
可以看到测试结果，第一个表格竟然没有达到我最初想要的隔行换色效果！是样式有问题吗？显然不是，因为第二个表格很正常地显示了效果。我分析这个问题可能是渲染的前后顺序有关。即在数据绑定之前，表格里只有一行，CSS对表格进行了背景色的渲染，之后数据绑定操作，（不知是完全拷贝这个第一行的渲染效果还是 expression 不认后来加进去的行还是其它什么原因），总之后续添加的行只延用了第一行的样式。
为此我做了一个调整，即让样式渲染发生成数据绑定之后，我在<body>里的onload事件里加了一点代码。看一下代码效果：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>expression vs XML data</title>
<style type='text/css'>
.mm tr
{
background-color:expression((this.rowIndex%2==0)?"#00FF33":"#CCFF33")
}
</style>
<xml id='XmlData'>
<?xml version="1.0" encoding="GB2312"?>
<rows>
<row>
<id>1</id>
<area>Web 开发/非技术区</area>
<trend>↑</trend>
<percent>67.23%</percent>
</row>
<row>
<id>2</id>
<area>C/C++/C++ 语言</area>
<trend>↑</trend>
<percent>14.35%</percent>
</row>
<row>
<id>3</id>
<area>Delphi/非技术区</area>
<trend>↑</trend>
<percent>13.88%</percent>
</row>
<row>
<id>4</id>
<area>Oracle/基础和管理</area>
<percent>11.87%</percent>
<trend>↑</trend>
</row>
<row>
<id>5</id>
<area>Windows专区/Windows NT/2000/XP/2003</area>
<percent>8.33%</percent>
<trend>↑</trend>
</row>
<row>
<id>6</id>
<area>.NET技术/非技术区</area>
<percent>7.32%</percent>
<trend>↓</trend>
</row>
<row>
<id>7</id>
<area>Web 开发/JavaScript</area>
<percent>7.24%</percent>
<trend>↑</trend>
</row>
<row>
<id>8</id>
<area>VC/MFC/基础类</area>
<percent>4.80%</percent>
<trend>↑</trend>
</row>
<row>
<id>9</id>
<area>Java/J2EE / EJB / JMS</area>
<percent>3.00%</percent>
<trend>↑</trend>
</row>
<row>
<id>10</id>
<area>扩充话题/灌水乐园</area>
<percent>1.75%</percent>
<trend>↓</trend>
</row>
</rows>
</xml>
</head>
<body onload="document.getElementById('Tab').className='mm'">
<table id="Tab" datasrc='#XmlData' border='1'>
<tr>
<td><div datafld='id'></div></td>
<td><div datafld='area'></div></td>
<td><div datafld='trend'></div></td>
<td><div datafld='percent'></div></td>
</tr>
</table>
<hr>
下面这个表格是一个测试表格，以测试样式里的 expression 的代码准确性，
<table class="mm" border='1'>
<tr>
<td><div>1111</div></td>
<td><div>2222</div></td>
<td><div>3333</div></td>
<td><div>4444</div></td>
</tr>
<tr>
<td><div>2222</div></td>
<td><div>2222</div></td>
<td><div>3333</div></td>
<td><div>4444</div></td>
</tr>
<tr>
<td><div>3333</div></td>
<td><div>2222</div></td>
<td><div>3333</div></td>
<td><div>4444</div></td>
</tr>
<tr>
<td><div>4444</div></td>
<td><div>2222</div></td>
<td><div>3333</div></td>
<td><div>4444</div></td>
</tr>
</table>
</body>
</html>
结果证明了我当初的设想，由此可见IE的样式 expression 和 XML数据岛绑定之间的配合不是很默契！
- IE样式的expression与XML数据岛绑定有点冲突
- 主题样式与数据绑定
- WINJS：绑定数据与样式
- datagridview 与 XML数据绑定
- XML绑定数据岛的例子
- XML数据岛，数据绑定
- hibernate4 与 spring3有点冲突
- hibernate4 与 spring3有点冲突
- 利用jabx进行xml与javabean的数据绑定
- google toolbar 与IE的冲突
- IE与FF的js冲突
- C#利用Lambda和Expression实现数据的动态绑定
- OpenLayers与Bootstrap样式冲突的解决
- xml数据岛绑定表格
- angular数据绑定 {{}} 与后台模板语言冲突
- 如何绑定到 XML 数据与 InternetExplorer
- 数据岛的绑定与DSO
- XML 数据岛之一数据绑定
- 鸟笼山剿匪记
- 动态聚类中 C－均值算法 (K－均值算法)的C++实现
- Effective STL目录
- 在可执行jar中动态载入第三方jar(转贴)
- asp调用orcle存储过程（过程中含有输出参数）
- IE样式的expression与XML数据岛绑定有点冲突
- 一位老工程师给年轻工程师的十个忠告
- 开始
- 调用只含有输入参数的过程。（asp，oracle）
- 继续翻译
- CVSNT在Windows下的安装和使用
- 开源在中国的商业发展前景
- 我的软件推广成功之路
- 验证电话号码,支持手机座机可加国家代码和区号，座机支持分机
