主要是在原来的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>
分享到:
相关推荐
表格奇偶行不同背景色.rar 表格奇偶行不同背景色.rar
用DOM控制的奇偶行变色的简单表格实现,通过javascript实现对奇偶行的表格背景颜色的控制
老二牛车教育程矢 Axure夜话之中继器系列视频教程之中继器表格奇偶行换色.rar html原型文件
程矢Axure夜话图文教程中继器表格奇偶行换色.pdf
利用ListCtrl的NM_CUSTOMDRAW消息,另报表中奇偶行颜色不同
程矢Axure夜话图文教程中继器表格奇偶行换色2.pdf
制作原型图时经常需要用到奇偶行不一样背景色的数据表格,这是一个此类效果的原型图小例子,大家可以下载来看看,希望能帮到大家。
表格奇偶行设置不同颜色,在某些情况下还是比较实用的,下面有个不错的示例,大家可以参考下,希望对大家有所帮助
Word 2021表格奇偶行交错着色轻松实现.docx
1、实现了奇偶行不同颜色显示; 2、实现了对长文本列文本的换行; 3、创建公式,实现字符串的连接; 4、实现分页功能; 5、实现交叉表; 6、读取图片。
自己写的一个类,可以用来设定表格奇偶行的颜色,也可以用来设定每一行的颜色,还可以改变其它的属性。
最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定。 先定义...
做表格的时候,经常要让奇偶行显示不同背景色,一来使表格显得更美观,二来使同行数据查找更快捷方便。通常我们是怎么实现的呢?就是在每个tr标签上加css样式。 代码如下所示: <html> <style type=text/...
老二牛车教育程矢 Axure夜话之中继器系列视频教程之中继器表格奇偶行换色2.rar html原型文件
可以提供的功能有奇偶行颜色交替,鼠标移上高亮显示,好用,简单
想必大家都有遇到过这样的效果,就是当鼠标经过时颜色不同,且奇偶行颜色也不同,此鼠标响应效果在css中也可以实现,下面有个不错的示例代码,需要的朋友可以参考下
列表视图(CListView)某些行,可根据需要设置成不同的颜色。 不是列表控件(CListCtrl),是列表视图(CListView)。