实现 Table 的行交替颜色、选中行变色的一种方法。演示+源码

借用了一下园子里的新闻的标题 :) 使用css和js实现。

 

新闻标题 添加时间 人气
iPhone 3G拆解图 08-07-27 00,002
奥运核心资源被分食 搜狐央视网谁忽悠谁? 08-07-27 1,234,567
微软推增强浏览器插件IE7Pro 助IE一臂之力 08-07-27 00,123
智联招聘70%股权换1.1亿美元巨额融资 08-07-27 08,888
前Google员工推搜索引擎Cuill 3倍Google网页数 08-07-27 00,654
WCG中国区落幕 一代新人换旧人 08-07-27 00,003

 

如果您想看源代码的话,IE的菜单栏,查看>源文件,您就能看到了。

 

 

.css_Grid
{}{
    color:Black;
    background-color:#ffffee;
    border-color:#5D7B9D;
    border-width:1px;
    border-style:solid;
    width:100%;
    
}

.css_GridTR
{}{
    color:White;
    background-color:#5D7B9D;
    
}
td   
{}{
    font-size: 9pt;
    padding:3px;
}

.css_TR_c1
{}{
    background-color:#ffffee ;
    color:#000000;
}
.css_TR_c2
{}{
    background-color:#ffffaa ;
    color:#993300;
}

.css_TR_move
{}{
    background-color:#eaa ;
    color:#123456;
}

.css_TR_CK
{}{
    background-color:#ee0 ;
    color:#333333;
}

 

 

<script type="text/jscript" language="javascript">
        var clickClass = "";
        var moveClass = "";
        var clickTR ;
        var moveTR ;
        function Move(me)
        {
            if (clickTR != me)
            {
                if (moveTR != me)
                {
                    moveClass = me.className;
                    moveTR = me;
                    me.className = "css_TR_move";
                    //alert("a");
                }
            }   
        }
        
        function Out(me)
        {
            if (clickTR != me)
            {
                moveTR = null;
                me.className = moveClass;
            }
        }
        function Ck(me,dataID)
        {
            if (clickTR != me)
            {
                if (clickTR)
                {
                    clickTR.className = clickClass;
                }   
                clickTR = me;
                clickClass = moveClass;
            }
            //alert("您选择的记录ID:" + dataID);
            me.className = "css_TR_CK";
        }
    </script>

时间: 2024-10-06 21:08:54

实现 Table 的行交替颜色、选中行变色的一种方法。演示+源码的相关文章

用CSS和表格代码实现每行交替颜色的效果比较

css|比较 用CSS写出表格每行交替颜色的效果 关于用CSS定义,来表现出表格每行不同的颜色,用来区分每行数据,方便阅读.其中有的是利用IE的BUG,在CSS里面添加动态的内容,IE会解析它,这个先不谈,因为和主题没有关系. 还看到几个很简单的方法,利用给不同的标签不同的背景色达到效果,先看这个方法的CSS th {font-weight: normal; text-align:left; background: #CCCCCC} td {background: #FAFAFA} 页面代码 <

Android shell命令行中过滤adb logcat输出的几种方法_Android

我们在Android开发中总能看到程序的log日志内容充满了屏幕,而真正对开发者有意义的信息被淹没在洪流之中,让开发者无所适从,严重影响开发效率.本文就具体介绍几种在shell命令行中过滤adb logcat输出的方法.        1.只显示需要的输出(白名单)        最方便的当然是通过管道使用 grep 过滤了,这样可以使用 grep 强大的正则表达式匹配.简单的匹配一行当中的某个字符串,例如 MyApp:        adb logcat | grep MyApp       

js获取GridView中行数据的两种方法

这篇文章介绍了js获取GridView中行数据的方法,有需要的朋友可以参考一下   第一种方法: 复制代码 代码如下: function submitData() {     var tb = document.getElementById(IDArray[0]);   //获取服务器控件GridView的ID     if (tb)      {     var rows = tb.rows;     for (var i = 1; i < rows.length; i++) {       

.net 删除多行的语句?试了有五种方法都不行!

问题描述 通过javascript,在ASP下常用,在.net下参数传不了? 解决方案 解决方案二:实在没看懂你写的什么解决方案三:为什么传不了一次性传过去不就好了么到了后台再分割成为一个个ID解决方案四:.net下删除多行数据,代码如下:<head><title>manage_News</title><metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR">

jquery实现全选、不选、反选的两种方法_jquery

在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr(). 方法一:

Oracle 多行记录合并/连接/聚合字符串的几种方法_oracle

什么是合并多行字符串(连接字符串)呢,例如: SQL> desc test; Name Type Nullable Default Comments ------- ------------ -------- ------- -------- COUNTRY VARCHAR2(20) Y CITY VARCHAR2(20) Y SQL> select * from test; COUNTRY CITY -------------------- -------------------- 中国 台

Oracle 多行记录合并/连接/聚合字符串的几种方法

怎么合并多行记录的字符串,一直是oracle新手喜欢问的SQL问题之一,关于这个问题的帖子我看过不下30个了,现在就对这个问题,进行一个总结.-什么是合并多行字符串(连接字符串)呢,例如: 1 SQL> desc test; 2 Name Type Nullable Default Comments 3 ------- ------------ -------- ------- -------- 4 COUNTRY VARCHAR2(20) Y 5 CITY VARCHAR2(20) Y 6 7

jquery实现效果比较好的table选中行颜色

 这篇文章主要介绍了jquery table选中行颜色实现代码,需要的朋友可以参考下 jquery table选中行颜色(效果更好)  代码如下: <html>  <head>  <style type="text/css">  .table-tr-title{  height: 26px;  font-size: 12px;  text-align: center;  }  .table-tr-content{  height: 18px;  ba

jquery实现效果比较好的table选中行颜色_jquery

jquery table选中行颜色(效果更好) 复制代码 代码如下: <html> <head> <style type="text/css"> .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size: