javascript学习实录 之七（实现鼠标移动上去后表格颜色变化）

最新推荐文章于 2022-03-09 18:54:16 发布
最新推荐文章于 2022-03-09 18:54:16 发布
阅读量324 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/raosheng1993/article/details/45456985
版权


废话不说，直接上代码，css部分，实在是无力，简单搞搞样式，意思到就好

[javascript] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <head>  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         table {  
  8.             border: blue solid 1px ;  
  9.         }  
  10.         table tr {  
  11.             border: aqua solid 1px;  
  12.             background-color: blueviolet;  
  13.         }  
  14.         .one {  
  15.             background-color: #33FFCC;  
  16.         }  
  17.         .two {  
  18.             background-color: #FFFF66;  
  19.         }  
  20.         .over {  
  21.             background-color: brown;  
  22.         }  
  23.     </style>  
  24.   
  25.     <script type="text/javascript">  
  26.         var name;  
  27.         function trcole() {  
  28.             var tabNode = document.getElementsByTagName("table")[0];  
  29.             var trs = tabNode.rows;  
  30.             for(var x=1; x<trs.length; x++) {  
  31.                 if(x % 2 ==1) {  
  32.                     trs[x].className = "one";  
  33.                 } else {  
  34.                     trs[x].className = "two";  
  35.                 }  
  36.   
  37.                 trs[x].onmouseover = function() {  
  38.                     name = this.className;  
  39.                     this.className = "over";  
  40.                 }  
  41.                 trs[x].onmouseout = function () {  
  42.                     this.className = name;  
  43.                 }  
  44.   
  45.             }  
  46.         }  
  47.         window.onload = trcole;  
  48.     </script>  
  49. </head>  
  50. <body>  
  51.     <table>  
  52.         <tr>  
  53.             <th>姓名</th>  
  54.             <th><a href="javascript:void(0)" οnclick="sortTab()">年龄</a></th>  
  55.             <th>地址</th>  
  56.         </tr>  
  57.   
  58.         <tr>  
  59.             <td>张三11</td>  
  60.             <td>35</td>  
  61.             <td>北京</td>  
  62.         </tr>  
  63.   
  64.         <tr>  
  65.             <td>张三22</td>  
  66.             <td>24</td>  
  67.             <td>北京</td>  
  68.         </tr>  
  69.   
  70.         <tr>  
  71.             <td>张三33</td>  
  72.             <td>68</td>  
  73.             <td>北京</td>  
  74.         </tr>  
  75.   
  76.         <tr>  
  77.             <td>张三44</td>  
  78.             <td>90</td>  
  79.             <td>北京</td>  
  80.         </tr>  
  81.     </table>  
  82. </body>  
  83. </html>
ruby小酱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
09-04
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
js实现表格变色（鼠标移动 选中变色）
08-13
鼠标移动到表格中时该行变色 离开时恢复 选中该行的复选框时变色 离开后不变色 取消选中后恢复
JavaScript实现鼠标放上去之后高亮显示且隔行换色
穆雄雄的博客
11-02 442
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &l
js实现表格上鼠标移行换色
cnso2的专栏
12-19 699
<td onmouseover="this.style.background='#FBE17C';this.style.color='#000000'" onmouseout="this.style.background='#FAF2B1';this.style.color='#FAF291'" align=middle heigh
JavaScript简单实现鼠标移动切换图片的方法
10-22
主要介绍了JavaScript简单实现鼠标移动切换图片的方法,涉及JavaScript针对鼠标事件的响应及页面元素的动态变换技巧,需要的朋友可以参考下
javascript实现通过表格绘制颜色填充矩形的方法
10-24
主要介绍了javascript实现通过表格绘制颜色填充矩形的方法,涉及javascript操作表格与样式的相关技巧,需要的朋友可以参考下
javascript实现随时变化着的背景颜色
10-24
主要介绍了javascript实现随时变化着的背景颜色的方法，非常的简单实用，有需要的小伙伴可以直接拿走。
javascript实现图片跟随鼠标移动效果的方法
10-24
主要介绍了javascript实现图片跟随鼠标移动效果的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
01-19
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果图如下： 源码（Demo）打包下载 html代码如下： 代码如下: <html> <head> <meta http-equiv=”Content-Type” content=”text/html;...
js 实现 鼠标经过表格时列变色
03-31
js 实现 鼠标经过表格时列变色! 值得下载看看!资源免费,大家分享!!
JavaScript-表格隔行换色·鼠标上移换色·合并显示
半吊子丶程序猿
09-20 234
HTML &lt;table id="tab1" border="1" width="800" align="center" &gt; &lt;tr&gt; &lt;td colspan="5"&gt;&lt;input type="button" value="添加"/&gt; &
使用js实现鼠标移入移出时背景色的切换效果
12-02 3829
定义两个方法： /*设置导航栏处的鼠标移出和移入时背景色的变化  */ function changeBG(o) { o.style.backgroundColor = "#5C75AA"; } function changeBG2(o) { o.style.backgroundColor = ""; } 在页面中的引用： class="top" href="
怎样实现鼠标移到表格,表格行背景色就变？
SpringJava的博客
12-24 568
本文要实现下面的效果，即: 鼠标移到表格,表格行背景色会改变。             Product Code        Price        Balance                NHP005         100.23         In Stock                 DOY002 ...
【JavaScript】鼠标经过表格变色
汤圆小丸叽的博客
09-10 835
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
Always believe that something wonderful happen
10-30 1737
代码：：： js实现表格隔行变色效果 .top{     background-color:#F93;     color:#30C;} table{     border:1px #000 dashed;     border-collapse:collapse; /*border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准
html表格鼠标变色,JS鼠标移动换色表格行变色
weixin_32150027的博客
06-05 538
点击按钮控制表格是否开启鼠标经过隔行换色，代码如下：1.表格应用：隔行变色、移入变色-Javascript005-表格应用、提取、添加、删除window.onload = function() {var table = document.getElementsByTagName('table')[0];var btn = document.getElementsByTagName('button'...
JS 鼠标的移入与移开 实现表格换色（onmouseover onmouseout ）
qq_41566772的博客
10-30 677
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; function changeColor(id,flag){ if(flag=="over&quot
javascript网页，鼠标移动对框框颜色改变以及下拉框（2）
starmultiple的博客
03-09 945
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* ul {padding-:0;margin-:0;} li { list-style:none;}//去掉列表n-one-前面有标识*/ li{list-style:
网页中的表格如何实现鼠标移动不显示悬停后才显示标签?
最新发布
01-29
在 HTML 中，可以使用 `title` 属性来实现鼠标移动不显示悬停后才显示标签的效果。例如： ```html 表格单元格标签">单元格内容 ``` 当鼠标悬停在单元格上时，就会显示出 `表格单元格标签` 这个标签。 注意...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值