IE样式的expression与XML数据岛绑定有点冲突

原创 2006年06月20日 15:29:00

先看一段代码,我在样式里用 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下前端调试工具

http://www.cnblogs.com/qfcndtt/archive/2012/08/27/2658403.html   一些前端开发 IE 中的常用调试工具: Microsoft Sc...
  • neusoft06
  • neusoft06
  • 2014年12月17日 12:56
  • 1068

XML 数据岛

With Internet Explorer, the unofficial tag can be used to create an XML data island.通过IE浏览器,非正式的标记可...
  • phqm
  • phqm
  • 2008年03月21日 15:36
  • 1466

XML 数据岛实例

HTML中的数据岛中的记录集 HT
  • tashanhongye
  • tashanhongye
  • 2015年10月27日 19:48
  • 782

利用Ajax与数据岛实现无刷新绑定 shang515

首先我们今天要用到的是Ajax.NET Professional ,您可以从http://www.schwarz-interactive.de/ 获取更多的信息然后还需要知道Xml数据岛,先来看一个简...
  • zfive5
  • zfive5
  • 2006年03月28日 12:56
  • 930

xml数据岛绑定表格

例子1:html与xml分离接收人发送人主题内容//test.xml       Empire Burlesque    Bob Dylan    USA    Columbia   例子2:html...
  • greatzheng
  • greatzheng
  • 2008年08月04日 17:56
  • 632

xml数据岛 + recordset 数据处理程序简单例子

本程序将数据库中数据一次性装载到客户端xml数据岛中,然后在客户端处理 用recordset 处理数据。从数据库中提取数据的程序:xmlDeptMatch.asp#include file="../i...
  • precipitant
  • precipitant
  • 2006年11月01日 11:58
  • 2027

XML 数据岛之二数据分页显示

我们已经知道如何使用HTML将XML数据岛中数据以Table形式显示出来,但是如果在数据比较多的时候,我们希望可以将数据分页显示,以避免用户上下翻屏。 熟悉HTML的朋友都知道标记中有一个dataPa...
  • chris_mao
  • chris_mao
  • 2007年10月15日 11:47
  • 1555

XML绑定数据岛的例子

XML绑定数据岛,小型的XML应用框架的例子。首先建立XML文件cd_catalog.xml,   Empire Burlesque  Bob Dylan  USA  Columbia  10.90 ...
  • ahpo
  • ahpo
  • 2006年03月20日 14:52
  • 1492

关于IE和火狐浏览器样式不兼容的一些总结

什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,...
  • handing2011
  • handing2011
  • 2011年11月13日 21:54
  • 5909

gridview的编辑状态下样式不受控制的问题

来自:http://zhidao.baidu.com/question/61114429 方法一:在代码里page_load 加一段:GridView1.Attributes.Add("style",...
  • cyyingsun
  • cyyingsun
  • 2010年07月25日 15:33
  • 2220
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE样式的expression与XML数据岛绑定有点冲突
举报原因:
原因补充:

(最多只允许输入30个字)