javascript - 使用javascript隐藏表格列 - 动态调整布局

Question

作为响应式设计的一部分，如果视口(viewport)大小缩小超过某个点，我会尝试动态隐藏表格的列。我试过设置 .style.visibility = "collapse"对于所有 <tr>元素和 .style.opacity = "0"对于所有 <td>元素。然后我必须隐藏 background表格，这样它就不会显示表格宽度仍然存在，同时也会增加 width表 (160%)，以便剩余的列填满屏幕。

虽然这实际上适用于 Chrome、Firefox、IE(包括 ie8!)和我的移动浏览器，但它似乎是一个荒谬的笨拙的 hack。还有其他建议吗？

    var jmq = window.matchMedia("screen and (max-width: 610px)");
    jmq.addListener(jmqListener);

    function jmqListener(jmq){
        var colTitle = getElementsByClassName('col-title');
        var colName = getElementsByClassName('col-name');
        var colDate = getElementsByClassName('col-date');
        var colFb = getElementsByClassName('col-fb');
        var table = getElementsByClassName('default');

        if (jmq.matches || window.innerWidth < 611 ) {
            //Mobile
            ... resize controls
            // hide table columns
            if (colName !== null){
                for(var i=0,j=colName.length; i<j; i++){
                    colName[i].style.visibility = "collapse";
                    colName[i].style.opacity = "0";
                }
            }
            // HACK - increase table width and hide the background which would show the reserved table space
            if (table !== null){
                for(var i=0,j=table.length; i<j; i++){
                    table[i].style.width = "160%";
                    table[i].style.background = "transparent";
                }
            }
        }
        else {
            // Desktop
            ... restore control layout for desktop
            // restore table column(s)
            if (colName !== null){
                for(var i=0,j=colName.length; i<j; i++){
                    colName[i].style.visibility = "visible";
                    colName[i].style.opacity = "100";
                }
            }
            if (table !== null){
                for(var i=0,j=table.length; i<j; i++){
                    table[i].style.width = "100%";
                    table[i].style.background = "#C8C8C8";
                }
            }
        }    
    }

function getElementsByClassName(className) {
    if (document.getElementsByClassName) { 
        return document.getElementsByClassName(className); }
    else { 
        return document.querySelectorAll('.' + className); 
    } 
}

Answer 1

我会改变你的 for 循环:

for(var i=0; i<colName.length; i++){
    colName[i].style.display = "none";
}

请注意您的 j 变量是完全多余的。

在MDN docs对于可见性，您会发现:

collapse
For table rows, columns, column groups, and row groups the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This was designed for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table.

强调我的

上面的解决方案本质上是使用display: none