主要是在原来的css基础上增加了一个自定义的RowSelect属性，这个属性通过expression表达式进行设置，我现在的感觉是expression中必须是一个?表达式，在?表达式中才能写我们想要的javascript方法，等以后有时间了再专门来求证这个疑问。如果是我猜想的这样，哪有什么更好的替代方式吗？这种替代方式就是behavior吗？一切都安排在以后清闲了再研究吧！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双色表格CSS实例</title>
<style type="text/css">
.test {
background-color:red;
}
#DataGrid1 tr {
background-color: expression(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
(this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF"
)
);
color: expression(this.sectionRowIndex == 0 ? "#FFFFFF" : "");
font-weight: expression(this.sectionRowIndex == 0 ? "BOLD" : "");
RowSelect: expression(0==1?"":(
onclick = function()
{
window.currentRow?window.currentRow.style.backgroundColor=(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
):"";
this.style.backgroundColor="#f3c3f3";
window.currentRow=this;
window.stopOut=true;
}
)
);
TableSelect: expression(
this.sectionRowIndex == 0 ? "" :
(
onmouseover = function()
{
window.stopOut=false;
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
},
onmouseout = function()
{
if(window.stopOut) return;
this.style.backgroundColor =
(
this.style.backgroundColor != "#69cdff" ? "#69cdff" :
(
this.sectionRowIndex == 0 ? "#FFCCCC" :
(
this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
)
)
)
}
)
);
}
#DataGrid1 td {
background-color:expression(
this.cellIndex == 0 ?
(
this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD"
)
: null
)
}
.FindAreaTable1 {
font-size: 12px;
color: #333333;
text-decoration: none;
width: 400px;
cursor: hand;
background-color: #FFFFFF;
vertical-align: middle;
text-align: center;
}
</style>
分享到：
相关推荐
### 当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同的实现方法 在Web开发中，为了提高用户体验，我们经常需要对表格进行美化。其中一个常见的需求是：当鼠标悬停在表格的数据行上时，该行的颜色会发生变化；...
此方法适用于需要对数据进行视觉区分的应用场景，例如：高亮显示某些特定行或列，使得用户能够快速识别出重要的数据。 ### 一、ExtJS GridView配置详解 在ExtJS中，`gridviewConfig` 是一个非常重要的配置对象，它...
总结来说，这个示例展示了如何利用CSS和特定的浏览器特性（如IE的`expression`）来实现表格奇偶行的双色效果。现代CSS实现中，通常会避免使用`expression`，转而使用`:nth-child()`或`:nth-of-type()`伪类来达到同样...
在这个例子中，我们遍历表格中的每一行，并根据行号（索引）的奇偶性添加不同的CSS类。然后，在CSS中定义这两个类的背景色，就可以实现颜色交替的效果。 然而，如果表格内容是动态加载或者分页的，我们需要确保在新...
在网页设计中，表格是一种常见的数据展示方式，但单一的颜色可能会让页面显得单调，难以区分不同的数据行。为了解决这个问题，"表格奇数偶数行条纹效果"被广泛采用，它通过交替颜色的方式使表格更加清晰易读。本教程...
本教程将深入探讨如何使用JavaScript创建动态的表格实例，包括表格的动态增删行功能以及鼠标移动时单元格变色和奇偶行颜色变化的效果。 首先，让我们了解HTML中的表格基础。`<table>`元素用于定义一个表格，`<tr>`...
例如，可以使用`:nth-child()`伪类选择器为每行的奇偶行设置不同的颜色，或者使用类名来针对特定行或单元格应用样式。 ```css table { border-collapse: collapse; /* 合并单元格边框 */ } td, th { border: 1px...
这样，你就成功地用JavaScript实现了对表格奇偶行样式的控制。 总结一下，控制表格奇偶行样式的核心在于对行元素（tr）的遍历和条件判断。使用jQuery时，利用`:odd`和`:even`选择器可以简化代码；而纯JavaScript则...
在我们的例子中，表格可能包含`<tr>`（行）、`<th>`（表头单元格）和`<td>`（数据单元格）。为了创建斑马效果，我们通常会在CSS中使用偶数行选择器，如`tr:nth-child(even)`，来交替设置背景色，这样可以提高可读性...
如此反复，表格的奇偶行就会交替显示黑白两种颜色，从而实现了隔行显示的效果。 这种方法的优点在于代码简洁，且不需要额外存储每个行的颜色状态。但是，如果表格行数非常多，或者需要支持多种颜色方案时，可能需要...
更进一步，我们可以利用CSS选择器来实现更为复杂的定制，如为奇偶行设置不同背景色，或者对特定列进行样式调整： ```css tr:nth-child(even) { background-color: #f2f2f2; } td:first-child { font-weight: ...
在网页设计中，经常需要对表格（table）的行进行美化，其中一种常见的方法是为奇偶行设置不同的背景色，以提高可读性和视觉效果。这个示例讲解了如何使用jQuery和CSS来实现这一功能。 首先，我们需要理解CSS部分。...
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
在编程领域，易语言是一种以中文为编程语句的编程工具，它旨在降低编程的门槛，使得更多非专业程序员能够快速上手。...这个“超级列表框行颜色设置”的源码示例，无疑为我们提供了一个很好的学习和参考的例子。
在XAML中，你可以使用`AlternatingRowBackground`属性来设置奇偶行的不同背景颜色。例如： ```xml ``` 这段代码将奇数行的背景设为浅灰色，偶数行的背景设为白色。 **RowDetail的编写**...
4. 若要实现奇偶行颜色差异，可以在`each`循环中判断行索引`i`是否为偶数，从而应用不同的背景颜色。 除了上述方法，还可以利用jQuery的`each`函数来一次性设定所有行的背景色，如下所示： ```javascript $("....
DBGrid是Delphi中常用的数据可视化组件，它允许用户以表格形式展示数据库中的数据。 1. **DBGrid行色**：在Delphi中，我们可以通过编写自定义事件处理程序来改变DBGrid中每一行的颜色。通常，这可以通过遍历DBGrid...
在表格或列表展示大量数据时，通过改变奇偶行的背景颜色，可以显著提高用户对数据的辨识度。本文将详细讲解如何在WinForms应用程序中实现隔行换色的效果。 首先，你需要创建一个WinForms项目并在窗体上添加一个...
在CSS中，我们可以使用`:nth-child(odd)`和`:nth-child(even)`伪类来选择奇偶行并应用不同的背景色。例如： ```css table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { ...
在网页设计和开发中，对数据进行展示时，...在这个实例中，我们学习了如何利用JavaScript动态创建表格，以及根据行的奇偶性设置不同的背景颜色。这个方法适用于各种项目，无论数据量大小，都能确保表格内容清晰易读。