精华内容
下载资源
问答
  • 表格隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

    表格隔行变色

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表格隔行变色</title>
        <style>
            table {
                width: 800px;
                margin: 100px auto;
                text-align: center;
                border-collapse: collapse;
                font-size: 14px;
            }
    
            thead tr {
                height: 30px;
                background-color: skyblue;
            }
    
            tbody tr {
                height: 30px;
            }
    
            tbody td {
                border-bottom: 1px solid #d7d7d7;
                font-size: 12px;
                color: blue;
            }
    
            .bg {
                background-color: #cccccc;
            }
        </style>
    </head>
    
    <body>
        <table>
    
            <thead>
                <tr>
                    <!--  tr行   th列 -->
                    <th>代码</th>
                    <th>名称</th>
                    <th>最新公布净值</th>
                    <th>累计净值</th>
                    <th>前单位净值</th>
                    <th>净值增长率</th>
                </tr>
            </thead>
    
            <tbody>
                <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>
            </tbody>
    
        </table>
    
        <script>
            // 1.获取元素 获取的是 tbody 里面所有的行
            var trs = document.querySelector('tbody').querySelectorAll('tr');
            // 2. 利用循环绑定注册事件
            for (var i = 0; i < trs.length; i++) {
    
                // 3. 鼠标经过事件 onmouseover
                trs[i].onmouseover = function () {
                    // console.log(11);
                    this.className = 'bg';
                }
    
                // 4. 鼠标离开事件 onmouseout
                trs[i].onmouseout = function () {
                    this.className = '';
                }
            }
        </script>
    </body>
    
    </html>
    
    展开全文
  • /*表格行的 OnMouseOver 时的CSS设置*/ .dg_tr_mouseover { background-color:#cccccc; } 文件名:hello.htm ------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C/...
    在我们使前后台分开的同时,有时我们想也用
    CSS来实现只有在JS里才能实现的动作,看似不可能的事情,但经过我的努力,但很好的
    工作了.
    

           我们知道 CSS 的Exprssion 在IE窗体需要重画时以及有鼠标动作时执行.所以不能直接用它来实现,这样当你的内容多时再快的计算机也受不了(原因是你的鼠标动一下,Expression就执行好几百次).

           为了避免这种情况,我们让我们的Expression第一次执行一次操作,以后就简单的返回,这样就可以大大的节省CPU.

           费话少说,下面是示例 代码(偶是程序员,也不知道说什么了!):

    文件名:myfont.css
    -----------------------------------------------------------
    body
    {
    }

    /*
    作者:阿牛(牛昆亮) QQ:273352165 MSN:niukl@hotmail.com

    声明:可以免费使用,请您保留此信息(大家都是作程序的,帮个忙了).
    如果您有什么改过,记得告诉我!
    */
    .dgInit
    {
    over:expression(((this.readyState=="complete") && (this.className=="dg")) || (
    (
    __evlon_init_tr=function(objTable){
    var i;
    for(i=0;i {
      objTable.rows[i].οnmοuseοver=function(){this.className="dg_tr_mouseover"};
      objTable.rows[i].οnmοuseοut=function(){this.className="dg_tr_normal"};
      objTable.rows[i].className="dg_tr_normal";
    }

    }
    ) ,(__evlon_init_tr(this)), (this.className="dg")));
    }


    .dg
    {
      
    }

    /*表格行的全局CSS设置*/
    .dg_tr_mouseover,.dg_tr_normal
    {
    font-style: italic;
    color:blue;

    }
    .dg_tr_normal
    {
    background-color:#ffffff;

    }

    /*表格行的 OnMouseOver 时的CSS设置*/
    .dg_tr_mouseover
    {
    background-color:#cccccc;
    }

    文件名:hello.htm
    ------------------------------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    <link href="myfont.css" rel="stylesheet" type="text/css">
    </head>
    <body >
    <div class="note" id="showmsg">0</div>
    <table class="dgInit"><!--只要这里加上 Class 就行了-->
      <tr >  
        <td> ni hao </td>
        <td> ni hao </td>
        <td> ni hao </td>
      </tr>
      <tr >  
        <td> ni hao </td>
        <td> ni hao </td>
        <td> ni hao </td>
      </tr>
    </table>
    <hr>
    </body>
    </html> 
    展开全文
  • ].rows[i].onmouseover = function (){ oldColor = this .style.background; this .style.background = " green " ; } oTab.tBodies[ 0 ].rows[i].onmouseout = function (){ this .style.background = ...
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script>
        window.onload=function(){
            var oTab=document.getElementById("tab1");
            var oldColor="";
            // alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
            for(var i=0;i<oTab.tBodies[0].rows.length;i++){
                oTab.tBodies[0].rows[i].onmouseover=function(){
                    oldColor=this.style.background;
                    this.style.background="green";
                }
                oTab.tBodies[0].rows[i].onmouseout=function(){
                   this.style.background=oldColor;
                }
                if(i%2){
                    oTab.tBodies[0].rows[i].style.background="#ccc";
                }else{
                     oTab.tBodies[0].rows[i].style.background=""; 
                }
            }
        }
    </script>
    </head>
    <body>
        <table id="tab1" border='1' width="500px">
            <thead>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>李四</td>
                    <td>34</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>王五</td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>李四</td>
                    <td>34</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>王五</td>
                    <td>40</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/itsmart/p/8047765.html

    展开全文
  • 代码 页面效果

    代码

    在这里插入图片描述
    在这里插入图片描述

    页面效果

    在这里插入图片描述

    展开全文
  • 使用javascript实现表格高亮(onmouseover()鼠标被移动元素上事件onmouseout()鼠标从某元素移开事件) 技术分析 确定事件(onmouseover()鼠标被移动元素上事件onmouseout()鼠标从某元素移开事件) 代码步骤 首先确定...
  • <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')"> <td>1 张三 <td>22 <tr onmouseover="changeColor('tr2','over')" id="tr2" ...
  • 4智能指针的作用和设计原理ANSWER布局文件中的MyTextView的属性,或者在肉体上被消灭都无法影响对比特币产生太多的影响M为N.也可以从屏幕删除view但我们别停下来, 硬件设计 选主题和选词都是两个随机的过程mongod –...
  • 1.因未设置 table外层父级容器的高度,导致table表格一直在自动计算宽高,一直向右滚动 2.后台接口返回的数据格式是 1,2,3,4,5 (不同的用户登录拥有的权限不一样) { title: 'Authorization', key: '...
  • onmouseover和onmouseout事件: 案例1:表格的隔行换色 style代码: <style> *{ margin: 0; padding: 0; } table{ width: 80%; line-height: 50px; text-align: center; border: 1...
  • 这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看...
  • 在一个元素上同时绑定onmouseover和onmouseout事件时, 如果这个元素包含有子元素,...我是在做一个table表格时,利用onmouseout和onmouseover来动态绘不同的制折线图,所以这种情况会导致table和折线图一直闪烁,解...
  • 鼠标经过表格变色样式:table { background-color:#000000; cursor:hand; width:100%; }td {/*设置onmouseover事件*/onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.styl...
  • 表格

    2019-09-28 09:06:39
    创建一个表格,有表头,数据有8行,5列,当鼠标移动到数据上时,数据所在行更换颜色,鼠标移开恢复原来颜色 View Code 1 <script type="text/javascript"> 2 function changeColor(color){ 3 color....
  • 当一个页面或一个层范围内有大量要重复使用onmouseover和 onmouseout行为的相同标签时,如果每个标签都去添加无疑使得页面变得非常冗长,今天做一个表格时就碰到这种情况,20行7列的表,大部分都有 onmouseover和...
  • 使用:hover和onmouseover的响应事件

    千次阅读 2019-05-12 18:23:26
    现在,我们要实现:当鼠标悬停在某个表格行的上方时,表格行中的字体加粗 。 1.可以在css中使用伪类:hover 所有主流浏览器都支持active、hover、link、visited伪类,但是只在对<a href>标签上的支持最好。 2...
  • DOM访问表格元素 常用属性和方法 rows[index]返回表格指定的行为对应属性 cells[index]返回表格指定的列所对应的属性 表格的增删改查 表格添加删除常用方法 表格行添加删除方法 列:实现购物车 列:设置表格...
  • ajax onmouseover显示Tip

    2008-01-12 18:30:00
    看到很多网站上面 鼠标停留在商品图片上面 边上显示出个提示层 显示些简单的商品信息 呵呵 研究了下 终于... // 声明一个临时变量 存贮图片位置的表格 var xmlHttp = null; function createXMLHttpRequest() { i...
  • 当谈到表格数据的设计时,没有太多的网页设计师会有太大的兴趣。在此我们已经收集了20多个功能超大且看上去挺漂亮的Ajax/CSS表格设计,并且教你一些表格设计中所运用的技巧,例如表格数据的排序和过滤等。让我们来看...
  • source2.parentNode : source2.parentElement if (source2.id=="mytable") colorChange(source2,"white","white") } } } 需要在body中添加表格,并调用上面的方法,代码如下所示: onMouseOver="colorChange_on...
  • 表格样式集锦

    2020-01-02 11:10:35
    以下是我在工作之余,在网络上找的一些牛人收集和制作的表格样式,后面会持续增加,以备不时之需。 1. Tablecloth Tablecloth 由CSS Globe 开发,是一个轻巧易于使用的表格,简洁的将表格样式...
  • 1. 两种细线表格做法     源码如下: 表格边线为1,线色为黑,行线色为白。
  • 最近在OA编程中要实现鼠标悬停后改变表格中元素的背景颜色 实现了javascript和CSS的两种方式,总结如下: Javascript的实现方式为: onMouseover="this.style.backgroundColor='#FFFFCC';" ...
  • 本文实例讲述了JS+CSS实现表格高亮的方法。分享给大家供大家参考。具体如下:这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束。...
  • 表格样式

    2011-09-22 17:30:21
    普通table表格样式及代码大全(全)(一) 单实线边框表格 单实线边框表格 虚线边框表格 虚线边框表格 点线边框表格

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,729
精华内容 5,091
关键字:

表格onmouseover