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

最新推荐文章于 2024-11-08 09:48:14 发布
最新推荐文章于 2024-11-08 09:48:14 发布
阅读量7.8k 收藏
点赞数
文章标签： xml ie border encoding table 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meizz/article/details/816236
版权

先看一段代码，我在样式里用 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 οnlοad="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数据岛绑定之间的配合不是很默契！

meizz
关注
Spring编写代理:expression表达式通过XML配置来实现AOP
m0_73535798的博客
03-31 239
AOP：AOP联盟（规范）、spring-aop （实现）织入包 aop联盟包。，从目标对象获得具体方法。特殊的切面，只有一个通知。
missing } in XML expression
security08的专栏
12-15 1687
本次遇到的问题是：在上传文件时，返回的json数据被加上了标签。（在普通的表单提交并不会加上标签） 利用firebug查看错误信息为：missing } in XML expression  ({success:true, msg:成功}) 对此问题解决如下：对response对象设置返回类型：resp.setContentType("text/html");
extjs fileUpload上传后返回报错missing } in XML expression
donghanyi的专栏
12-23 215
EXTJS上传文件后，页面接收到返回的json后报错：missing } in XML expression  使用firedebug跟踪了一下返回的数据, 发现 返回的json数据 responseText中被加上了&lt;pre&gt;&lt;/pre&gt;标签，当然是在fixfox中出现，在IE上却没有被加上&lt;pre&gt;&lt;/pre&gt;这样的标签，看...
切点 expression="execution(* com.zcc.xml.*.*(..))"的理解
qq_15740137的博客
11-23 416
<aop:pointcut expression="execution(* com.zcc.xml.*.*(..))" id="txPointCut"/> 里面的 第一个*是返回值 中间的 com.zcc.xml是可以用*代替 类似于模糊查询 第二个是模糊了该包下面的类也可以具体到某一个类 再后面一个是模糊某类中的 方法 后面（…）指的是参数 ...
问题:missing } in XML expression的解决方法
chenyuangege的专栏
12-04 1060
问题:missing } in XML expression的解决方法
C#利用Lambda和Expression实现数据的动态绑定
01-20
在程序开发过程中，有时为了让数据能够实时更新，我们会采用数据绑定来实现。 　一般我们数据绑定时我们是这样写的 public class Helper : INotifyPropertyChanged { #region statusInfo Property private ...
C# TextBox数据绑定的方法
08-26
C# TextBox 数据绑定的方法是指在 C# 中将 TextBox 控件与数据对象进行绑定的方法。这种方法可以使得 TextBox 控件的 Text 属性与数据对象的某个属性保持同步，从而实现数据的实时更新。 在 C# 中，TextBox 控件...
WPF xaml数据绑定
09-09
3. **绑定表达式（Binding Expression）**：在XAML中定义，用于指定数据源、目标属性以及绑定的相关选项。 4. **数据上下文（DataContext）**：通常是整个UI元素树的根，它为子元素提供默认的数据源。当一个元素的...
ASP.NET Eval进行数据绑定的方法
01-20
ASP.NET Eval是一个强大的数据绑定工具，特别是在ASP.NET 1.x版本到2.0的过渡中，它经历了一系列的改进，使得数据绑定变得更加简洁和易用。在本文中，我们将深入探讨ASP.NET Eval 2.0相对于1.1版本的改进，并理解其...
Silverlight绑定数据的例子.zip
06-19
其中，数据绑定是Silverlight开发中的核心概念之一，它允许UI元素与数据源进行联动，使得数据显示和更新变得更加简便。在这个"Silverlight绑定数据的例子.zip"压缩包中，我们很可能会找到一个演示如何在Silverlight...
JSP 中优雅使用 XML 标签
Acx7的博客
12-19 354
前言   一方面，在 JSP 中大家总是不喜欢看到 <% %> 出现在页面上，另一方面，使用 XML 对于前端程序员更友好，所以可以使用 XML 标签代替 JSP 语法。 JSP 对应 XML 标签 JSP XML <% %> <jsp:scriptlet></jsp:scriptlet> <%= %> <jsp:expression></jsp:expression> <%! %> &l
js针对IE 和 Mozilla 的差异
chensuper的专栏
07-28 186
兼容性的问题 webfx 网站已经做了很好的尝试，他们对 IE 和 Mozilla 中 JavaScript 的差异做了很好的封装。 其实我们的 Web 开发框架移植到 Mozilla 上并不是非常困难。只是目前没有明显的经济利益刺激我们做这件事。 IE 与 Mozilla 的主要差别在于： 1、对 HTML DOM 规范的支持，IE 除了支持标准的 API，还提供了 document...
Spring学习（二十三）Spring表达式语言介绍
wangxin1248的博客
06-13 6035
Spring表达式语言（Spring Expression Language）简称：SpEL 课程概要： Spring表达式语言的入门介绍Spring表达式语言的操作范围Spring表达式语言的运算符Spring表达式语言的集合操作 一.Spring表达式语言入门级介绍 1.基本概述        Spring表达式语言全称为“Spring Expression La
IKExpression简易表达式解析器详细讲解
qq_36250202的博客
11-06 4329
1. IK表达式介绍（IK Expression Introduction） IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言开发的一个超轻量级（Super lightweight）的公式化语言解析执行工具包。 IK ExpressionV2.0不依赖于任何第三方的java库。它做为一个简单的jar，可以集成于任意的Java应用中。这包括了JavaEE应用（基于应用服务器的）， Java桌面应用以及Java WebStart方式的应用。 IK
dom4j实现xml转map，xml转json字符串
u014644574的博客
11-06 210
dom4j实现xml转map，再使用 fastjson 将map转为json字符串。map转为json字符串方法很多，这里使用fastjson。xml转换为json后效果。
mapper.xml 使用大于号、小于号示例
最新发布
还在活水泥的未来包工头
11-08 168
SQL语句本身：直接将原来的 SQL 语句放在 <![CDATA[]]> 中，保持原有的 SQL 逻辑不变。来包裹 SQL 查询，这样就可以直接写 SQL 语句而不受 XML 特殊字符的限制。
Silverlight数据绑定：ObservableCollection与ItemsControl应用
"本文主要介绍了在Silverlight中使用Expression Blend进行数据绑定，特别是绑定到集合对象的方法。数据源可以是单个对象，也可以是对象集合，例如用于显示文章标题列表或图片系列。为了实现这种绑定，通常会使用...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值