发布于 2017-03-04 09:33:43 | 300 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


下面小编就为大家带来一篇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实现当鼠标移到表格上时显示这一格全部内容的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phperz。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务