表格标题上的长文本可视化

Question

我正在尝试使用 css 页面制作一些 html（我对这两个页面都是新手）并且我想将样式添加到带有列长名称的表头中，这个名称需要很长，但列宽是固定的，使得这些没有 css 的列会用文本换行来显示它们，所以行高不会很好显示。我试图找到一种很好的方式来显示表格。我想到的是，将列的名称“剪切”veryLongColumName到veryLong...表格标题的悬停位置，按原样显示，我该怎么做？我是否需要开始学习 JavaScript >> jQuery 才能做到这一点？我可以使用任何示例代码吗？

如果您对如何很好地显示该内容有更好的想法，欢迎您。

我不知道该怎么做，因为似乎需要进行数据操作（所以我需要 JavaScript 或 jQuery）；但是，我认为有两个带有缩短名称和原始名称的 div 标签，并根据鼠标悬停显示一个或另一个将完成工作，但我不知道如何实现（这也是 jQuery ？）。

提前致谢。

http://jsfiddle.net/byakku/Q5V98/1/

Answer 1

我试图在没有任何库/插件的情况下用纯 javascript 实现它，下面是我所拥有的，

使用纯 javascript（不使用 jQuery）DEMO 的解决方案

上面的demo代码使用jQuery可以减少很多，

使用 jQuery 的解决方案 - DEMO

使用jQuery：

function shortHandTableHeaders(tableID, limit) {

    var ths = $('#' + tableID + ' thead tr th');        
    var content;

    ths.each (function () {
        var $this = $(this);
        content = $this.text();

        if (content.length > limit) {
           $this.data('longheader', content);
           $this.text (shortHandHeaderTxt(content, limit));

           $this.hover (
               function() {
                   $(this).text($this.data('longheader'));
               },
               function () {
                   $(this).text(shortHandHeaderTxt($this.data('longheader'), limit));
               }
           );
         }
    });
}

function shortHandHeaderTxt(txt, limit) {
    return txt.substring(0, limit - 3) + "...";
}

下面是另一个没有 jQuery 的实现，

function shortHandTableHeaders(tableID, limit) {

    var tableEl = document.getElementById(tableID);
    var thead = tableEl.getElementsByTagName("thead");
    var thtrs = thead[0].getElementsByTagName("tr");
    var ths, content;

    for (var i = 0; i < thtrs.length; i++) {
        ths = thtrs[i].getElementsByTagName("th");

        for (var j = 0; j < ths.length; j++) {
            content = ths[j].innerHTML;

            if (content.length > limit) {
                ths[j].title = content;
                ths[j].innerHTML = shortHandHeaderTxt(content, limit);
                addEventHandler(ths[j], 'mouseover', function() {
                    this.innerHTML = this.title;
                });

                addEventHandler(ths[j], 'mouseout', function() {
                    this.innerHTML = shortHandHeaderTxt(this.title, limit);

                });
            }
        }
    }
}


function addEventHandler(el, eType, handler) {
    if (el.addEventListener) { // W3C, FF  
        el.addEventListener(eType, handler, false);
    } else if (el.attachEvent) { // IE  
        el.attachEvent('on' + eType, function() {
            handler.call(el);
        });
    }
}

function shortHandHeaderTxt(txt, limit) {
    return txt.substring(0, limit - 3) + "...";
}