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

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

css部分

html部分

  

  

    
序号
    
名称
    
类别
    
单位
    
成果要求
    
进展
  

    
最新进展
    
更新时间
  
  

  

    
1
    
阿拉蕾
    
阿拉蕾
    
阿拉蕾
    
阿拉蕾
    
阿拉蕾
    

  
  

    
2
    
阿拉蕾
    
阿拉蕾
    
阿拉蕾
    
阿拉蕾
    
阿拉蕾
    

  
  

    
3
    
阿拉蕾
    
阿拉蕾
    
阿拉蕾,
    
阿拉蕾
    

  
  

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