给表格添加鼠标提示

最新推荐文章于 2024-04-16 17:16:00 发布

joyhen

最新推荐文章于 2024-04-16 17:16:00 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET

本文链接：https://blog.youkuaiyun.com/Joyhen/article/details/8591071

ASP.NET 专栏收录该内容

111 篇文章

订阅专栏

如有不明白的地方欢迎加QQ群14670545 探讨

有时候我们表格里面显示不下内容就会把内容截断（后面可能添加省略号什么的）显示，但是在某些情况下我们需要看到这些内容，比如订单的地址，太长了，显示不全，直接打印当然好（写个方法，连接打印机即可），但是要是工作人员手工去抄录怎么办，显示不全。这个时候我们做一些简单的处理立即达到效果：

<!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 runat="server">
    <title></title>
    <script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        table{ background-color:#999;}
        table tr td{ background-color:#fff; text-align:center; height:30px; line-height:30px;}
        .div_info{ width:280px; background-color:#fff; line-height:23px; word-break:break-all; text-align:justify;
                    z-index:999; position:absolute; border:1px solid green; display:none;}/**/
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table cellpadding="0" cellspacing="1" width="500px;">
        <tr>
            <td>fdsafdsa</td>
            <td>fdsafdsa</td>
            <td>
                <div class="div_info">fdsafdsafdsaffdsafdsafdsaffdsafdsafdsaffdsafdsafdsaf</div>
            fdsafdsa</td>
            <td>fdsafdsa</td>
            <td>fdsafdsa</td>
        </tr>
        <tr>
            <td>fdsafdsa</td>
            <td>fdsafdsa</td>
            <td>
                <div class="div_info">fdsafdsafdsaffdsafdsafdsaffdsafdsafdsaffdsafdsafdsaf</div>
                fdsafdsa
            </td>
            <td>fdsafdsa</td>
            <td>fdsafdsa</td>
        </tr><tr>
            <td>fdsafdsa</td>
            <td>fdsafdsa</td>
            <td>
                <div class="div_info">fdsafdsafdsaffdsafdsafdsaffdsafdsafdsaffdsafdsafdsaf</div>
            fdsafdsa</td>
            <td>fdsafdsa</td>
            <td>fdsafdsa</td>
        </tr><tr>
            <td>fdsafdsa</td>
            <td>fdsafdsa</td>
            <td>
                <div class="div_info">fdsafdsafdsaffdsafdsafdsaffdsafdsafdsaffdsafdsafdsaf</div>
            fdsafdsa</td>
            <td>fdsafdsa</td>
            <td>fdsafdsa</td>
        </tr>
    </table>
    </div>
    </form>

    <script type="text/javascript">
        $(function () {
            $("table tr").find("td:eq(2)").hover(function () {
                //alert("123");
                $(this).find(".div_info").show();
            }, function () {
                $(this).find(".div_info").hide();
            })
        })
    </script>
</body>
</html>

效果如下：