JavaScript实现鼠标经过表格行给出颜色标识

本文实例为大家分享了JavaScript实现鼠标经过表格行给出颜色标识，供大家参考，具体内容如下

代码：

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin: 100px auto;
            width: 800px;
            border-spacing: 0;
            text-align: center;
        }

        table tr:nth-child(1) {
            background-color: rgb(135, 206, 235);
        }

        table tr:nth-child(n+2) {
            border-bottom: 1px solid black;
        }

        th {
            font-size: 14px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        td {
            font-size: 12px;
            padding-top: 8px;
            padding-bottom: 8px;
            color: blue;
            border-bottom: 1px solid lightgray;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>代码</th>
            <th>名称</th>
            <th>最新公布净值</th>
            <th>累计净值</th>
            <th>前单位净值</th>
            <th>净值增长率</th>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>农银金穗3个月定期开放债券</td>
            <td>1.075</td>
            <td>1.079</td>
            <td>1.074</td>
            <td>+0.047%</td>
        </tr>

    </table>

    <script>
        var rows = document.querySelectorAll(' table tr:nth-child(n+2)');
        for (var i = 0; i < rows.length; i++) {
            rows[i].onmouseover = function() {
                this.style.backgroundColor = "lightblue";
            }
            rows[i].onmouseout = function() {
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现鼠标经过表格行变色的方法

    本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){

  • Javascript实现的鼠标经过时播放声音

    Js代码如下: 复制代码 代码如下: <script type="text/javascript" language="JavaScript"> function play() { //注意文件路径,且文件大小一般10kb以内 document.all.bgs.src="Notify.wav"; } </script> 在<body> 内加 <bgsound loop="1" id=&

  • JavaScript实现鼠标经过表格行给出颜色标识

    本文实例为大家分享了JavaScript实现鼠标经过表格行给出颜色标识,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&

  • javascript实现table选中的行以指定颜色高亮显示的方法

    本文实例讲述了javascript实现table选中的行以指定颜色高亮显示的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table选中的行以指

  • javascript简单实现表格行间隔显示颜色并高亮显示

    复制代码 代码如下: <script type="text/javascript"> var name; //存储tr对象的类名,当鼠标移开时进行恢复 function trcolor(){ //表格行颜色间隔显示 var tabNode = document.getElementsByTagName("table")[0]; var trNodes = tabNode.rows; for(var x=1;x<trNodes.length;x++)

  • JavaScript实现鼠标经过表格某行时此行变色

    本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码,供大家参考,具体内容如下 表格表头为蓝色,表主体为白色,当鼠标放到表的非表头行时,这一行颜色变为黄色,鼠标离开时黄色消失. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

  • asp.net GridView控件鼠标移动某行改变背景颜色(方法一)

    asp.net GridView控件鼠标移动某行改变背景颜色(方法一)

    复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Syste

  • 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现

    第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin

  • JS实现的表格行鼠标点击高亮效果代码

    本文实例讲述了JS实现的表格行鼠标点击高亮效果代码.分享给大家供大家参考,具体如下: 偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效) <script type="text/javascript"> var highlightcolor='#E0F2FE'; var clickcolor='#ffedd2'; function MouseOver(){ var source=event.srcElement; if (sour

  • javascript 拖动表格行实现代码

    行拖动的实现思路非常简单,选中一行,往上拖就与上面的行交换位置,往下拖就与下面的行交换位置.问题是如何得到交换行.我见过一个非常详细的教程,它会把表格里的每一行的高度与Y坐标计算出来,换言之,都时是比较e.pageX是否在[rowTop,rowBottom]区间之内.但这也带来第二个问题,有多少行就有多个这样的区间.于是解法就变成取事件源对象,然后再往上取其父对象,如果其父对象是TR元素,就取其[rowTop,rowBottom]区间....思路非常直接,同时也客观做出一个限制--不能使用代理拖

  • 高亮显示web页表格行的javascript代码

    本篇作为开发学习笔记之一. [文] 在web开发中经常遇到需要加亮鼠标指向的表格行的情况.首先说说一般的情况. ·简单尝试 CSS2中允许我们对HTML元素使用hover伪类,这极大的方便了对于表格的样式的控制. 我们从一个小例子开始: XHTML(只列出了表格部分,请自行补完页面,本例在Transational的DTD下通过): 复制代码 代码如下: <table class="datatable" cellspacing="0"> <thead

随机推荐