js实现当鼠标移到表格上时显示这一格全部内容的代码

想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件,但是我没有用,还是自己写了一个。

css部分

<style>
    #showbox {
      width: 150px;
      min-height: 50px;
      font: 100 14px/1 "微软雅黑";
      border: 1px solid #3c8dbc;
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff;
      padding: 5px;
    }
  </style>

html部分

<table id="example1" role="grid">
  <thead style="background-color: #E4E9F0;">
  <tr role="row">
    <th rowspan="2" style="text-align: center; width: 6%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">序号</font></th>
    <th rowspan="2" style="text-align: center; width: 10%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">名称</font></th>
    <th rowspan="2" style="text-align: center; width: 10%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">类别</font></th>
    <th rowspan="2" style="text-align: center; width: 8%;" class="sorting_disabled" colspan="1"><font style="font-weight:bold;">单位</font></th>
    <th rowspan="2" style="text-align: center; width: 26%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">成果要求</font></th>
    <th colspan="2" style="text-align: center; " rowspan="1"><font style="font-weight:bold;">进展</font></th></tr>
  <tr role="row">
    <th style="text-align: center; width: 30%;" class="sorting_disabled" rowspan="1" colspan="1"><font style="font-weight:bold;">最新进展</font></th>
    <th style="text-align: center; width: 10%;" class="sorting_disabled " rowspan="1" colspan="1"><font style="font-weight:bold;">更新时间</font></th></tr>
  </thead>
  <tbody>
  <tr role="row">
    <td>1</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td></td>
  </tr>
  <tr role="row">
    <td>2</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td></td>
  </tr>
  <tr role="row" class="odd">
    <td>3</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾,</td>
    <td>阿拉蕾</td>
    <td></td>
  </tr>
  </tbody>
</table>
<div id="showbox"></div>

js部分

$(function() {
    function showBox(obj,box){
      var timer = null;
      $(obj).on("mouseover", function (e) {
        clearTimeout(timer);
        var clientX = e.clientX;
        var clientY = e.clientY;
        var txt = $(this).text();
        timer = setTimeout(function () {
          console.log(clientX, clientY);
          $(box).css("left", clientX).css("top", clientY);
          if (txt == "") {
            $(box).hide();
          } else {
            $(box).show();
            $(box).html(txt);
          }
        }, 1000);
      });
      $(obj).on("mouseout",function(){
        clearTimeout(timer);
        $(box).hide();
      });
    }
    showBox("#example1 > tbody td","#showbox");
  });

最后,其实bootstrap里面有个组建可以显示里面的内容,只是显示的是title,一开始不会改没用那个,后经人点醒,可以直接给title赋值,就是给title赋值为表格里面的text就好。

以上这篇js实现当鼠标移到表格上时显示这一格全部内容的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 一个简单但常用的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实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xhtm

  • javascript表格隔行变色加鼠标移入移出及点击效果的方法

    本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.   说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现

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

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

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

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

  • js实现当鼠标移到表格上时显示这一格全部内容的代码

    想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;

  • javascript实现鼠标移到Image上方时显示文字效果的方法

    本文实例讲述了javascript实现鼠标移到Image上方时显示文字效果的方法.分享给大家供大家参考.具体如下: 先看一下运行效果截图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • asp.net下用js实现鼠标移至小图,自动显示相应大图

    实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 .Net精简版本 <script language="JavaScript"> function GetShowImg(imgfile) { document.all("ShowImage").src = "/semir/images/"+ imgfile; } </script> //DataList绑定 <asp:datalist id="DlSi

  • jQuery实现鼠标移到某个对象时弹出显示层功能

    本文实例讲述了jQuery实现鼠标移到某个对象时弹出显示层功能.分享给大家供大家参考,具体如下: /** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮动在这个元素旁边的层 div.css("position", "absolute");//让这个层可以绝对定位 var

  • 易语言设置鼠标移动到组件上时的文本显示颜色

    热点颜色属性 所属对象:超级链接框   操作系统支持:Windows,数据类型:整数型: 将整数型数据赋值到指定对象的热点颜色属性中 语法:对象.热点颜色 = 整数型 应用对象:超级链接框 例程 说明: 本属性设置鼠标移动到组件上时的文本显示颜色. 设置超级链接框的热点颜色为热点颜色选择器选择的颜色. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • 基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示: hover时显示二维码 二.实现 用如下这样一个简单的效果:鼠标hover到A上显示B来模拟 有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一 原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE ht

  • jQuery实现鼠标移到元素上动态提示消息框效果

    当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery动态提示消息框效果</title><base target="_blank&qu

  • 鼠标移到图片上变大显示而不是放大镜效果

    ToopTip.js: 复制代码 代码如下: function getViewportHeight() { if (window.innerHeight!=window.undefined) return window.innerHeight; if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight; if (document.body) return document.body.cl

  • 当鼠标移动到图片上时跟随鼠标显示放大的图片效果

    原始状态:  鼠标经过:   复制代码 代码如下: <!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

  • asp.net GridView和DataList实现鼠标移到行行变色

    在GridView控件的RowDataBound事件里添加以下代码 if (e.Row.RowType == DataControlRowType.DataRow) { //当鼠标移到行上时更改背景色 e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#EE82EE'"); //当鼠标移开时还原背景色 e.Row.Attribut

随机推荐