首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:56:20
字体:
来源:转载
供稿:网友

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

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>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选