当前位置：移动技术网 > IT编程>开发语言>JavaScript > 鼠标移动到某个单元格上后，整个列都变色的实现方法

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

2019年07月30日 | 移动技术网IT编程 | 我要评论

以上代码可以实现鼠标移动到单元格上，单元格变色，现在我想实现鼠标移动到某个单元格上后，整个列都变色不知道可以不可以实现呢？

<html>

<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title>如何定义表格的鼠标隔列变色行为</title> 
<style> 
body { 
    font: normal 12px auto "trebuchet ms", verdana, arial, helvetica, sans-serif; 
    color: #4f6b72; 
    background: #e6eae9; 
} 
.mytable { 
    width: 80%; 
    padding: 0; 
    margin: 0; 
}

.mytable td { 
    border-bottom: 1px solid #c1dad7; 
    background: #fff; 
    font-size:12px; 
    padding: 6px 6px 6px 0px; 
    align:center; 
    color: #4f6b72; 
}

td.alt { 
    background: #f5fafa; 
    text-align:center; 
    color: #797268; 
}

td.baialt { 
    background: #ffffff; 
    text-align:center; 
    color: #000; 
}

td.spec { 
    border-top: 0; 
    background: #fff ; 
    text-align:center; 
    font: 12px "trebuchet ms", verdana, arial, helvetica, sans-serif; 
}

td.specalt { 
    border-top: 0; 
    background: #f5fafa ; 
    text-align:center; 
    font: 12px "trebuchet ms", verdana, arial, helvetica, sans-serif; 
    color: #797268; 
} 
</style>

</head> 
 
<body>

<table class="mytable" cellspacing="0" id="table1" onmouseover="senfe(this)" onmouseout="senfe(this)"> 
        <tr> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
        </tr> 
        <tr> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
        </tr> 
        <tr> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
        </tr> 
        <tr> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
        </tr> 
          </table> 
           
            </div> 
          <p align="center">当鼠标经过时希望实现隔列变色（最好是反色） ，效果示例如下：</p> 
            <div align="center"> 
          <table class="mytable" cellspacing="0" id="table2"> 
        <tr align="center"> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
        </tr> 
          </table> 
           
            </div> 
           
            
</body></html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

代码已经帖上来，现在鼠标移动到单元格变色
phx.rows[i].cells[j].onmouseover=function()
        {
         if(pobj!=this){
                         this.bgcolor=overcolor;}
              }
以及移出单元格变色
phx.rows[i].cells[j].onmouseout=function()
              {
        if(pobj!=this){
                        this.bgcolor=outcolor;}
              }
都已经解决·
剩下的问题是phx.rows[i].cells[j].onclick也就是我单击了表格的某个单元格后，希望这个单元格所在的那一列都可以变色，请问如何处理呢？

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

js中的四种继承方式

js中的继承什么是继承js中创建对象的方式：继承的四种方式原型继承call继承组合式继承ES6中的继承什么是继承... [阅读全文]
JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]

网友评论


验证码：

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

2019年07月30日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论