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

var overcolor='#cccccc';
var outcolor='#f2f3f7';
var clkcolor='deeppink';

var pObj=null;
for (var i=0;i

       
       
       

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

如何定义表格的鼠标隔列变色行为

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;
}

function senfe(sid){
var tds=sid.getElementsByTagName("td")
for(var i=0;i

当鼠标经过时希望实现隔列变色（最好是反色） ，效果示例如下：

[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也就是我单击了表格的某个单元格后，希望这个单元格所在的那一列都可以变色，请问如何处理呢？

var overcolor='#cccccc';
var outcolor='#f2f3f7';
var clkcolor='deeppink';

var pObj=null;
for (var i=0;i

       
       
       

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js实现的点击超链显示隐藏层

    点击链接,显示提示框,提示框里也有链接可点击. 鼠标移开链接或者移开提示框,提示框就隐藏. 下面这个我写的不能自适应,如果菜单左对齐,显示层能否自动在右边显示?应该怎样调整JS? test body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decorati

  • 单击按钮显示隐藏子菜单经典案例

    复制代码 代码如下: <mce:script language="javascript"><!-- var count=0;//做计数器 var limit=new Array();//用于记录当前显示的哪几个菜单 var countlimit=1;//同时打开菜单数目,可自定义 function expandIt(el) { obj = eval("" + el); if (obj.style.display == "none"

  • 鼠标移动到超链接上的效果

    a:hover { text-decoration: none;position: relative;text-decoration: none; height: 0; filter:blur Alpha(Opacity=90, FinishOpacity=40, Style=2);} abcde [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Jquery中显示隐藏的实现代码分析

    $("#id").show()//表示display:block, $("#id").hide()//表示display:none; $("#id").toggle()//切换元素的可见状态.如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. $("#id").css('display','none'); $("#id").css('display','block'); //或 $("

  • 基于JQuery实现鼠标点击文本框显示隐藏提示文本

    基于JQuery实现鼠标点击文本框显示隐藏提示文本

    比如本人网站的搜索框: 不使用的时候: 鼠标点击后: 用JQuery实现这个效果非常简单,下面是代码: 复制代码 代码如下: $(document).ready(function () { var searchBox = $("#ctl00_txtSearch"); searchBox.focus(function () { if (searchBox.val() == this.title) { // TextBox控件ToolTip属性转换为Html为title属性 searchB

  • JS控制显示隐藏兼容问题(IE6、IE7、IE8)

    在IE7中, 使用jQuery 显示:$("#a").attr("style",""); 隐藏:$("#a").attr("style","display:none"); 但是显示这个方法在IE8中不行 IE8 显示:$("#a").removeAttr("style"); 隐藏:$("#a").attr("style

  • 使用脚本控制网页Table的显示隐藏(全代码)_AX

    [需求] 如果大家登录过 我傲:http://www.woall.com 新浪博客等 就会发现可以点击栏目标题,就会发现栏目可以展开和收起,非常好用!其实这个功能实现起来很简单.重点就是要找到要隐藏的Table行,对它的display属性进行控制. 强烈建议大家登录:http://www.woall.com亲身体验一下! [另]帖子里网址怎么加链接啊??? [源码]使用方法:把文件考下来,保存为htm类型的文件即可! 无标题文档 你点我啊!! AXzhz制作 [Ctrl+A 全选 注:如需引入外

  • jQuery 网易相册鼠标移动显示隐藏效果实现代码

    jQuery 网易相册鼠标移动显示隐藏效果实现代码

    其实主要是jquery 层选择器的应用,jquery 高手可以跳过... 网易相册效果图如下:当鼠标移动经过照片就显示"设为封面|删除",移开后就隐藏,此效果在web开发中经常会用到.故总结一下 直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • jquery实现的提示浮层跟随鼠标移动

    jquery实现: jquery实现简单文字提示 #preview{border:1px solid #cccccc; background:#9900CC;color:#fff; padding:5px; display:none; position:absolute;} 把鼠标放到这里1 把鼠标放到这里2 把鼠标放到这里3 把鼠标放到这里4 把鼠标放到这里5 this.imagePreview = function(){ /* CONFIG */ xOffset = 10; yOffset

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

    var overcolor='#cccccc'; var outcolor='#f2f3f7'; var clkcolor='deeppink'; var pObj=null; for (var i=0;i                         [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 以上代码可以实现鼠标移动到单元格上,单元格变色,现在我想实现鼠标移动到某个单元格上后,整个列都变色不知道可以不可以实现呢? 如何定义表格的鼠标隔列变色行为 body { font: n

  • EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容

    1:这个东西是我抄的(抄的哪儿的我就想不起来了- -)弹出的窗没有样式 不是很好看 //扩展 $.extend($.fn.datagrid.methods, { /** * 开打提示功能 * @param {} jq * @param {} params 提示消息框的样式 * @return {} */ doCellTip : function(jq, params) { function showTip(data, td, e) { if ($(td).text() == "") r

  • layui实现鼠标移动到单元格上显示数据的方法

    如下所示: { field : 'operNm', //title是纯文本 title : '<span title="用户姓名">用户姓名</span>', width : 150, align : 'center', //下面的是从数据库里取出来的数据 templet:'<div><span title="{{d.year}}">{{d.year}}</span></div>' //判空 /

  • JQuery实现表格中相同单元格合并示例代码

    代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this

  • .NET读写Excel工具Spire.Xls使用 Excel单元格控制(3)

    .NET读写Excel工具Spire.Xls使用 Excel单元格控制(3)

    前一篇文章:" .NET读写Excel工具Spire.Xls使用(2)Excel文件的控制"给大家介绍了C#使用Spire.XLS来控制Excel文件的基本功能和相关实践代码.这篇文章将重点介绍C#操作Excel文件时,对Excel单元格的控制. 以前在使用NPOI的时候,其实印象最深的还是单元格的操作,因为以前使用NPOI的主要任务是生成一个复杂的统计报表,不仅表头比较复杂,而且行类别的控制也比较复杂,不是固定的,要动态的进行.并且不同单元格的边框还不一样,所以当初使用 NPOI 也

  • 基于jQuery的合并表格中相同文本的相邻单元格的代码

    ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 广州 00027 白花油               广东 广州 00028 红花油               广东 深圳 00028 红花油               广东

  • jquery 动态合并单元格的实现方法

    如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab

  • Swift实现表格视图单元格多选

    Swift实现表格视图单元格多选

    本文实例为大家分享了Swift实现表格视图单元格多选的具体代码,供大家参考,具体内容如下 效果 前言 这段时间比较忙,没太多的时间写博客,前段时间写了一些关于表格视图单选的文章,想着,一并把多选也做了,今天刚好有时间,去做这样一件事情.多选在我们的应用程序中也是常见的,比如消息的删除,群发联系人的选择,音乐的添加等等可能都会涉及到多选的需求,本文,我将模拟多选删除消息来讲讲多选的实现. 原理 多选删除其实很简单,并不复杂,我的思路就是创建一个数组,当用户选中某个单元格的时候,取到单元格上对应的数

  • javascript动态添加单元格的脚本代码

    如何动态添加单元格!! 复制代码 代码如下: 用insertRow()和insertCell()方法 其用法如下: insertRow()  复制代码 代码如下: var newTR=TableOBJ.insertRow(N); 复制代码 代码如下: 其中N表示插入到第几行!  说明:当N=0时,插入到最上面一行!当N=-1时插入到最后一行,相当省略该参数!  insertCell() 复制代码 代码如下: var newTD=TrOBJ.insertCell(N); 其中N表示插入到第几列!

  • jquery合并表格中相同文本的相邻单元格

    jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>

随机推荐