鼠标滑过表格内的每个单元格变色，而不是整行变色。

最新推荐文章于 2020-10-02 18:40:17 发布
最新推荐文章于 2020-10-02 18:40:17 发布
阅读量810 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mz_shenbian/article/details/8718492
版权
<!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=utf-8" />
<title></title>
<style type="text/css">
td.tdCurr {background:#FC0}
</style>
</head>


<body>
<table width="750" border="0" cellspacing="1" cellpadding="0" bgcolor="#666666">
  <tr>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
  </tr>
  <tr>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
  </tr>
  <tr>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
    <td height="30" bgcolor="#FFFFFF"> </td>
  </tr>
</table>
<script type="text/javascript">
var tds = document.getElementsByTagName('td');


for (var i = 0; i < tds.length; i++) {


    tds[i].onmouseover = function() {


        this.style.background = '#FC0';


    }


    tds[i].onmouseout = function() {


        this.style.background = '#fff';


   }


}


</script>


</body>
</html>
mz_shenbian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现鼠标滑过鼠标变色功能
06-10
jquery实现鼠标移动到表格上后，各行显示表格背景不同的颜色，也就是各行高亮效果
当鼠标移到单元格(tr、td)背景变色 多种解决方案
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
鼠标点击改变单元格颜色或点击改变行颜色
DN_XIAOXIAO的博客
04-19 7397
单击改变行颜色打开一模板如：%FR_HOME%\WebReport\WEB-INF\reportlets\GettingStarted.cpt模板，点击模板&gt;模板web属性&gt;分页预览设置，选择为该模板单独设置，然后添加加载结束事件，具体js如下：contentPane.makeHighlight('red'); //使点击的行变成红色  分页预览模板，当鼠标点击某行时，某行变色。如果要...
鼠标经过时单元格变色
weixin_30847939的博客
10-13 229
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标经过时单元格变色</title><style type="text/css">table{color:#565;font:12px ...
鼠标经过单元格改变背景色
菜鸟学编程
09-11 661
在单元格中加入 这句 onMouseOver ="this.style.backgroundColor=DFDFDF" onMouseOut ="this.style.backgroundColor=#F1F1F1"
javascript table美化鼠标滑动单元格变色
10-30
效果非常不错的table美化，当鼠标滑过去，背景色变换效果
鼠标移动到某个单元格上后，整个列都变色的实现方法
10-31
鼠标移动到某个单元格上后，整个列都变色的实现方法
js生成动态表格并为每个单元格添加单击事件的方法
10-26
主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下
js 实现 鼠标经过表格时列变色
03-31
js 实现 鼠标经过表格时列变色! 值得下载看看!资源免费,大家分享!!
Excel选择某单元格整行变色是这样做的
热门推荐
Violinlins
04-21 1万+
在使用Excel处理数据的时候，数据的输入是最关键的部分。 　　如果您在输入数据的时候，尤其是数据量比较大的情况，往往会因为无法直观的判断单元格所在的行，导致输入的数据输入到其它的行！ 　　那么，有没有一种办法，能让我们实现，一旦选择了哪个单元格，该单元格的所在的行的颜色会发生改变，这样，我们就能直观的看出，数据应该输入到哪行了。 方法/步骤 1 根据
实现 鼠标点击表格行背景变色，移开后点击另一行时另一行变色而前一行恢复原来的背景色
yueyuehe的专栏
11-05 6832
直接上代码代码有注释 可以copy测试         点击table行后之前点击的行恢复为自己原来的颜色                           var oldColor;         var index;             function changeIndex(obj) {                 if(in
鼠标划过表格行变色效果JS
勇往直前的专栏
07-21 3231
&lt;!--鼠标滑过表格行变色效果开始--&gt; &lt;script type="text/javascript"&gt;         /* 当鼠标移到表格上是，当前一行背景变色 */       $(document).ready(function(){             $(".g-sun-li tr td").mouseover(function(){            ...
CSS实现鼠标滑过表格变色
人生与梦
01-25 738
第一种: expression　　代码如下:　　&lt;html&gt;　　&lt;head&gt;　　&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;　　&lt;style type="text/css"&gt;　　.tablestyle{　　background-color:#C
当鼠标移动到表格的一行时这一行的背景颜色发生改变
muyuren123的博客
12-11 6234
当鼠标移动到表格的一行时这一行的背景颜色发生改变 方法一：       当鼠标经过表格的一行时这一行的背景颜色发生改变      table, th, tr, td{     width:500px;     border:1px solid red;     border-collapse:collapse;    }    tr, td{     text-
鼠标移到表格的某一行，那一行变色的问题
rookie_s的博客
11-19 1万+
这个实现的过程很简单，网上相关实现的例子很多，这里记录下自己之前实现的方法。参考的网上的例子，网址不记得了。  这个问题简单点就是鼠标响应事件。 下面放代码     var rows = document.getElementsByTagName('tr');//取得行         for(var i=0 ;i         {             r
案例：表格鼠标经过变色 / 全选反选
weixin_50119334的博客
10-02 340
案例一：表格鼠标经过变色 案例：用到鼠标事件：鼠标经过 onmouseover 鼠标离开 onmouseout 思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色 //注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行 <style> table { width: 800px; margin: 100px auto; text-align: center; border-
GridControl实现每一个单元格变色
最新发布
06-03
要实现GridControl中每一个单元格变色，可以通过自定义绘制单元格的方式来实现。具体实现步骤如下： 1. 在GridControl的Paint事件中，使用Graphics对象绘制单元格，可以使用DrawString或DrawRectangle等方法。 2. 在绘制单元格之前，判断该单元格是否需要变色。可以通过判断单元格的行、列、数据等信息来决定是否需要变色。 3. 如果需要变色，使用Graphics对象的FillRectangle方法填充单元格的背景色。可以使用SolidBrush或LinearGradientBrush等刷子来设置背景色。 下面是一个简单的示例代码，实现了GridControl中每一个单元格根据行号变色的效果： ```C# private void gridControl1_Paint(object sender, PaintEventArgs e) { for (int row = 0; row < gridControl1.RowCount; row++) { Brush brush = row % 2 == 0 ? Brushes.LightBlue : Brushes.White; for (int col = 0; col < gridControl1.ColumnCount; col++) { Rectangle rect = gridControl1.GetCellDisplayRectangle(col, row, false); e.Graphics.FillRectangle(brush, rect); e.Graphics.DrawString(gridControl1[row, col].ToString(), gridControl1.Font, Brushes.Black, rect); } } } ``` 在上面的示例中，使用了双重循环遍历所有单元格，根据行号的奇偶性来决定单元格的背景色。在绘制单元格时，使用FillRectangle方法填充背景色，使用DrawString方法绘制单元格的文本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值