JS 将table内未显示完全内容显示完全

非原创，来源网络

@* 单元格显示详情 *@

<style>
    #showbox {
         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>
<div id="showbox"></div>
<script type="text/javascript">
    $(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("#TargetControl > tbody td", "#showbox");//targetControl为需要显示完全的目标单元格
    });
</script>

上述代码可以全部整合到JS中；其调用可直接放在网页最后或放在onload中。

小子将css与div整合到JS中后如下，这样调用将更加方便，而不用再在页面中添加div与需要的css

<script type="text/javascript">
    $(function () {
        var d = document.createElement('div');
        d.id = "showbox";
        d.style.cssText = " 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;";
        document.body.appendChild(d);

        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("#tableResult > tbody td", "#showbox");//tableResult为需要完全显示的table ID
    });
</script>

 另外注意一下，此需要引入jquery2.1.4  小子试了下，引入更高版本的Jquery会出现未知问题，目前此还未解决。