`

单元格背景色鼠标响应

XHTMLHTML 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>





<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>单元格背景色鼠标响应</title>



<script language="javascript">

<!--

var aTDClick=new Array(3);

function onColor(td,n){
if(!aTDClick[n-1]){
    td.style.backgroundColor='#FFFF99';
        td.style.color='#0600FF';
    }else{
        td.style.backgroundColor='#FF6699';
        td.style.color='#0600FF';
    }
}


function onClickColor(td,n){
var TR1=document.getElementById("TR1");
var TR2=document.getElementById("TR2");
var TR3=document.getElementById("TR3");

switch(n){
    case 1:
        if(aTDClick[0]!==true){
            td.style.backgroundColor='#FF6699';
                td.style.color='#0600FF';
                aTDClick[0]=true;
             }else{
                TR1.style.backgroundColor='';
                TR1.style.color='';
                aTDClick[0]=false;
             }

            TR2.style.backgroundColor='';
            TR2.style.color='';
        TR3.style.backgroundColor='';
            TR3.style.color='';
            aTDClick[1]=false;
            aTDClick[2]=false;
           
break;

case 2:
        if(aTDClick[1]!==true){
             td.style.backgroundColor='#FF6699';
                 td.style.color='#0600FF';
                 aTDClick[1]=true;
            }else{
                 TR2.style.backgroundColor='';
                 TR2.style.color='';
                 aTDClick[1]=false;
           }

       TR1.style.backgroundColor='';
           TR1.style.color='';
           TR3.style.backgroundColor='';
           TR3.style.color='';
           aTDClick[0]=false;
           aTDClick[2]=false;

           break;

case 3:
        if(aTDClick[2]!==true){
            td.style.backgroundColor='#FF6699';
            td.style.color='#0600FF';
                aTDClick[2]=true;
             }else{
                TR3.style.backgroundColor='';
                TR3.style.color='';
                aTDClick[2]=false;
             }

            TR2.style.backgroundColor='';
            TR2.style.color='';
        TR1.style.backgroundColor='';
            TR1.style.color='';
            aTDClick[1]=false;
            aTDClick[0]=false;

            break;
        }
}



function offColor(td,n){
    if(!aTDClick[n-1]){
    td.style.backgroundColor='';
        td.style.color='';
    }else{
        td.style.backgroundColor='#FF6699';
        td.style.color='#0600FF';
   }
}



-->

</script>

<style type="text/css">

<!--

.light {
        font: normal 9pt "宋体";
        color: #000000;
        text-decoration: none;
        background: #FFFFFF;
        cursor: default;
}

.tdstyle {
        border: 1px dashed #0099CC;
}

-->

</style></head><body>


<table border="0" cellpadding="0" cellspacing="4" width="100%">

  <tbody><tr>

    <td style="" id="TR1" class="tdstyle" onmouseover="onColor(this,1);" onmouseout="offColor(this,1);" onclick="onClickColor(this,1);" height="25">菜单1</td>

    <td id="TR2" class="tdstyle" onmouseover="onColor(this,2);" onmouseout="offColor(this,2);" onclick="onClickColor(this,2);" height="25">菜单2</td>

    <td id="TR3" class="tdstyle" onmouseover="onColor(this,3);" onmouseout="offColor(this,3);" onclick="onClickColor(this,3);" height="25">菜单3</td>

  </tr>



</tbody></table>


</body></html>
分享到：
| session过期后如果在iframe里操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JaveScript源代码大放送

    12表格单元格背景色鼠标响应 13用JavaScript实现页面百叶窗效果 14用JS的方法使用列表LI制作的隔行换色 15直接调用计算机中的程序 16网页的任意缩放 17页面窗口的由小变大 18说明框的各种用法 19导航菜单下拉展开的...

    java script 在html中的小应用

    3. **表格单元格背景色鼠标响应** (12 用Javascript实现表格单元格背景色鼠标响应.html)： 当鼠标移到表格单元格上时，单元格的背景色会变化。这里用到了`onmouseover`和`onmouseout`事件，以及修改元素的`style....

    易语言高级表格鼠标移动时改变背景色

    "易语言高级表格鼠标移动时改变背景色"这个主题涉及到的是如何利用易语言这一中国本土化的编程语言，来实现用户在表格上移动鼠标时动态改变单元格背景颜色的功能。易语言以其简洁的语法和丰富的库函数，使得这类交互...

    jQuery鼠标移动表格变色及修改单元格值

    - `css()`方法用于修改元素的样式，如`$('td').css('background-color', 'newColor')`将所有单元格的背景色改为`newColor`。 3. **动态修改单元格值**： - `click`事件：当用户点击单元格时，可以监听`click`事件...

    改变选择table行的背景色

    具体来说，它通过监听鼠标悬停(`onMouseOver`)、鼠标离开(`onMouseOut`)以及点击(`onClick`)事件来改变指定行的背景颜色。以下是代码的主要组成部分： 1. **全局变量声明**：`var aTDClick = new Array(3);` 这里...

    响应鼠标变换表格背景或者颜色.rar

    要实现鼠标经过时改变背景色或颜色的效果，我们首先要有一个基本的表格结构。 ```html 数据1 数据2 数据3 数据4 ``` 接着，CSS样式用于定义表格及其元素的外观。我们可以设定默认的表格样式，然后用...

    CCtrlList重绘之点击单个单元格高亮

    4. **自定义绘制**：在`NM_CUSTOMDRAW`消息处理中，根据单元格的状态（是否被选中）调整其背景色、边框等视觉元素，以实现高亮效果。可以使用`SetBkColor`、`SetTextColor`等函数来改变单元格的颜色属性。 5. **...

    鼠标移动到某个单元格上后，整个列都变色的实现方法

    当鼠标进入单元格时，如果当前单元格不等于之前高亮的单元格（`pObj`），则将其背景颜色设置为`overcolor`；当鼠标离开单元格时，如果条件相同，背景颜色恢复为`outcolor`。 接下来，我们考虑`onclick`事件，即...

    文字列表鼠标移动单元格渐变动画特效

    这段代码中，`.list-item`是列表单元格的类名，当鼠标悬停时，背景颜色会从红色渐变到蓝色，过渡时间为0.3秒。 综上所述，"文字列表鼠标移动单元格渐变动画特效"是一个结合了CSS3、JavaScript和前端框架技术的实践...

    GridView行背景颜色

    5. **数据绑定时设置颜色**：如果需要根据数据动态设置行的背景色，可以在GridView的数据绑定事件（如DataBound）中检查数据源中的字段，然后根据字段值设置行的背景颜色。 6. **JavaScript/jQuery**：在客户端，...

    当鼠标滑过表格时，表格的行会高亮显示，鼠标离开颜色复原，如果鼠标点击，点击行会保存为红色不变

    - 鼠标悬停（`:hover`）状态下，我们可以为`&lt;tr&gt;`定义一个类，例如`.hover`, 并设置背景色等样式，使得鼠标经过时行变高亮。例如： ```css tr.hover { background-color: #f0f0f0; /* 或者其他您选择的颜色 */ ...

    响应鼠标变换表格背景或者颜色的代码

    当鼠标离开(`onMouseOut`)时，背景色恢复到初始值（白色），当鼠标移动到(`onMouseOver`)单元格上时，背景色变为浅灰色。 这些方法都是使用内联样式和JavaScript实现的，但现代前端开发更倾向于使用CSS来分离样式和...

    delphi 中鼠标移动事件

    - 在`DBGrid1DrawColumnCell`中，如果鼠标位于某个单元格内，则会将该单元格的背景色设置为红色。这里使用了`PtInRect`函数来判断鼠标位置是否在指定矩形区域内。 #### 五、应用场景与扩展 1. **应用场景**： - ...

    CSS鼠标响应事件经过、移动、点击示例介绍

    另外，我们还可以使用CSS表达式来实现更复杂的鼠标响应效果，例如改变表格的边框颜色和背景色： ```html table { background-color: #000000; cursor: hand; width: 100%; } td { /* 设置onmouseover事件 */ ...

    响应鼠标变换表格背景或者颜色特效代码

    这样的CSS规则会让表格中的每个单元格在鼠标悬停时改变背景颜色。然而，如果想要根据鼠标点击来改变颜色，我们可以使用JavaScript。以下是一个使用纯JavaScript的例子： ```javascript var table = document....

    易语言模拟Excel表格的鼠标移动效果

    这可以通过设置单元格的背景颜色或者边框样式来实现，同时需要考虑到颜色的淡入淡出效果，使得过渡更加自然。 3. **取行列号**：获取鼠标所在位置对应的行列号是模拟Excel的一个基础功能。这需要计算鼠标坐标与表格...

    CListCtrlEx

    除了表头，CListCtrlEx还允许设置列表项、列宽和每个单元格的高矮和背景色。这使得开发者可以根据内容调整布局，同时可以创建具有对比度的视觉效果，以便突出特定的数据。 5. **自定义样式**： CListCtrlEx提供了...

    table行随鼠标移动变色示例

    `.mouse_color` 类用于定义鼠标悬停时单元格的背景色。同时，`#tab` 选择器设置了表格的边框、对齐方式、宽度和高度。 然后，我们利用JavaScript（这里使用了jQuery库）来实现动态变色的效果。`$("#tab tr:odd")` ...

    ListCtrl内嵌按钮及其响应

    在描述中提到的高度、背景色和前景色的自绘，可以通过在这些函数中使用GDI（Graphics Device Interface）函数来实现。例如，我们可以使用`SetBkColor`和`SetTextColor`设置单元格的颜色，使用`FillRect`填充背景，...

Magicbox
Global site tag (gtag.js) - Google Analytics