zoukankan      html  css  js  c++  java
  • 鼠标指向表格中的一行时,该行背景色改变;点击行时,突出显示标记颜色

    <html>
    <head>
    <script language=javascript>
    /************************************************************************
     *函 数 名:ChangeRowBg(row)
     *功能描述:鼠标指向表格中的一行时,该行背景色改变,点击行时,突出显示标记颜色
     *注:1.在tr中添加事件:onmouseover,onmouseout,onmousedown
     *   2.在tr中如有下载链接(如下载Word文档),请将target设为_blank,否则可能出js错
     *入    参:row--tr对象
     *创 建 人:夏春涛 xchuntao@163.com qq:23106676
     *创建时间:2005-07-01
     ************************************************************************/
      //全局变量
      var OldRowBgColor;
      var NewRowBgColor  = "#b5c5e6"; //用小写
      var MarkRowBgColor = "#ff9933"; //用小写
      function ChangeRowBg(row)
      {
     if (event.type=='mouseover')
     { 
      /*
      RowBgColor = event.srcElement.parentElement.bgColor;   
      event.srcElement.parentElement.bgColor = "#b5c5e6";
      */
      /*
      RowBgColor = event.srcElement.parentElement.style.backgroundColor 
      event.srcElement.parentElement.style.backgroundColor = "#b5e5e6";
      */
      OldRowBgColor = row.style.backgroundColor  
      row.style.backgroundColor = NewRowBgColor

     }
     else if (event.type=='mouseout')
     {
         row.style.backgroundColor = OldRowBgColor;
     }
     else if (event.type=='mousedown')
     {
      if (row.style.backgroundColor != MarkRowBgColor)
      {
       row.style.backgroundColor = MarkRowBgColor;
       row.onmouseout = function(){return false;}
       row.onmouseover= function(){return false;}
         }
         else
         {
       row.style.backgroundColor = NewRowBgColor ;
       row.onmouseout = function(){ ChangeRowBg(row);}
       row.onmouseover= function(){ ChangeRowBg(row);}
         }
     }
      }
    </script>
    </head>
    <body>
    <table align=center width=500 bgcolor="#669999" border=1 cellspacing=0>
    <tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
    <td>TestData</td>
    <td><a target=_blank href="new.htm">TestLink</td>
    </tr>
    <tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
    <td>TestData</td>
    <td><a target=_blank href="new.htm">TestLink</td>
    </tr>
    <tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
    <td>TestData</td>
    <td><a target=_blank href="new.htm">TestLink</td>
    </tr>
    <tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
    <td>TestData</td>
    <td><a target=_blank href="new.htm">TestLink</td>
    </tr>
    <tr onmouseover="ChangeRowBg(this)" onmouseout="ChangeRowBg(this)" onmousedown="ChangeRowBg(this)" >
    <td>TestData</td>
    <td><a target=_blank href="new.htm">TestLink</td>
    </tr>
    </table>
    </body>
    </html>
    //--------在asp.net中的应用(对Datagrid利用如下函数进行初始化):--------

    public void ChangeRowBg(DataGrid grdTable)
      {   
         for(int i=0;i<grdTable.Items.Count;i++)
         {
           grdTable.Items[i].Attributes.Add("onmouseover","ChangeRowBg(this)");
           grdTable.Items[i].Attributes.Add("onmouseout","ChangeRowBg(this)");
           grdTable.Items[i].Attributes.Add("onmousedown","ChangeRowBg(this)");
         }   
      }

  • 相关阅读:
    词云图value传递数据不显示(已解决)
    中文分词并将结果存入数据库
    《浪潮之巅》阅读笔记(一)
    亿信BI——维度转换组件使用
    SyntaxError: NonUTF8 code starting with '\xef' in file(已解决)
    AJAX——POST请求
    Ajax前后端交互——后端接收前端页面变量
    Ajax——Get请求
    《浪潮之巅》阅读笔记(二)
    谷粒商城分布式基础(十)—— 商品服务API—新增商品 & 商品管理
  • 原文地址:https://www.cnblogs.com/SummerRain/p/214208.html
Copyright © 2011-2022 走看看