0

我有一个响应表，text-overflow: ellipsis用于截断对于其单元格来说太长的文本。

我编写了一个脚本，允许我在单击列标题时展开/折叠表列，以便在之前被截断的情况下可以显示其列的整个文本。

一切正常，但是当单击标题并调整列大小时，在调整页面大小时，表格将不再适应页面，在一定宽度下。所以基本上，表格在点击之前是有响应的，之后就失去了响应能力。

这有点道理（如果你固定宽度，你会失去响应能力，我猜）。

但是，我不知道如何在“窗口调整大小”上重置这些宽度，以便表格 th 和 td 再次变得流畅，并且整个表格在点击事件后保持响应。否则，该功能在人体工程学上没有任何意义。

这是html：

<!DOCTYPE html>
<html>
  <body>
        <div class="content">
            <div class="container">
                <table>
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                        <th>Col 4</th>
                        <th>Col 5</th>
                        <th>Col 6</th>      
                    </tr>
                    <tr>
                        <td>Data 1 - Data 1 - Data 1 - Data 1 - Data 1 - Data 1 - Data 1</td>
                        <td>Data 2 - Data 2 - Data 2 - Data 2 - Data 2 - Data 2 - Data 2</td>
                        <td>Data 3 - Data 3 - Data 3 - Data 3 - Data 3 - Data 3 - Data 3</td>   
                        <td>Data 4 - Data 4 - Data 4 - Data 4 - Data 4 - Data 4 - Data 4</td>
                        <td>Data 5 - Data 5 - Data 5 - Data 5 - Data 5 - Data 5 - Data 5</td>
                        <td>Data 6 - Data 6 - Data 6 - Data 6 - Data 6 - Data 6 - Data 6</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
 </html>

这是CSS：

body{
    padding: 0px;
    margin: 0px;
}

table {
    border-collapse: collapse;
    white-space: nowrap; 
    table-layout: fixed;
    font-size:12px;
    width:100%;
 }

table, th, td {
    border:1px solid black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container{
        margin-left:36px;
    margin-top:30px;
}

这是jQuery：

var is_resized=0;

/******************************************************************/    

$(document).ready(function(){initialize();});
window.onresize = function(){initialize();};

/******************************************************************/

function initialize() 
{
    var winWidth = $(window).width();
    var winHeight = $(window).height();

    $('.container').width(winWidth-74);
    $('.content').height(winHeight-88);
    $('table').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
}

/******************************************************************/

$("th").click(function()
{       
    tableau   = new Array(); 
    var indx_th   = $(this).index();
    var indx_total;
    var td_minimized_width;
    var td_maximized_width;

    $("td:nth-child("+(indx_th+1)+")").each(function()
    {
        var element = $(this)
                      .clone()
                      .css({'display': 'inline', 'width': 'auto', 'visibility' : 'hidden','font-size':'12px','position': 'absolute', 'top': 0, 'left': 0,'padding':'6px'
                      })
                      .appendTo('body');

        var rect1 = $(this)[0].getBoundingClientRect();
        var rect2 = element[0].getBoundingClientRect();

        td_minimized_width = rect1.right - rect1.left + 1;
        td_maximized_width = rect2.right - rect2.left;      

        element.remove();

        if(! tableau[indx_th]){ tableau[indx_th] = new Array();}        

        if(! tableau[indx_th]['minimized']){
            tableau[indx_th]['minimized'] = new Array();
            tableau[indx_th]['maximized'] = new Array();
            tableau[indx_th]['resize'   ] = 0;
        }

        tableau[indx_th]['minimized'] = td_minimized_width;

        if( td_maximized_width > td_minimized_width ){
            tableau[indx_th]['resize'   ] = 1;

            if( tableau[indx_th]['maximized'] < td_maximized_width)
            {
                tableau[indx_th]['maximized'] = td_maximized_width;   
            }
        }
    });

    if(tableau[indx_th]['resize'] == 1)
    {
        var l=$("td:last-child").index();
        var val= ( ($('table').width()) - (tableau[indx_th]['maximized']) -66 ) / l ;

        $(this).siblings().animate({width: val},550);
        $(this).animate({width: tableau[indx_th]['maximized']-10},550);

        is_resized=1;
    }
    else{
        if(is_resized==1)
        {
            var l=$("td:last-child").index();
            var val= ( ($('table').width()) -66 ) / (l+1) ;

            $('th').animate({width: val},550);                      

            is_resized=0;
        }
    }
});

这很难解释和总结，但这里有一个 JSFiddle 来说明这个问题。

https://jsfiddle.net/21vqzo49/1/

任何帮助，将不胜感激。

PS：当然，jQuery 脚本对于示例来说有点矫枉过正，但我​​在这里简化了 HTML。在真正的 html 代码中，行和列的数量是动态的，脚本应该相应地管理表格，无论其大小和复杂性如何。

4

1 回答 1

1

调整窗口大小时，您需要重置表头样式。

window.onresize = function(){
    $("th").css({'width':'auto'});
    initialize();
};

这将在调整大小时解决您的问题。

于 2019-02-06T06:57:58.400 回答