Hiding table columns with javascript - dynamically adjust layout

Question

As part of my responsive design, I'm trying to dynamically hide columns of a table if the viewport size shrinks past a certain point. I've tried to set .style.visibility = "collapse" for all <tr> elements and .style.opacity = "0" for all <td> elements. I then have to hide the background of the table so that it doesn't show that the table width is still there while also increasing the width of the table (160%) so that the remaining columns fill the screen.

While this actually works on Chrome, Firefox, IE (including ie8!) and my mobile browsers, it seems like a ridiculous kludgy hack. Any other suggestions?

    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); 
    } 
}

Any reason you don't use media queries?

jcuenod
– jcuenod

2015-07-06 16:39:08 +00:00
Commented Jul 6, 2015 at 16:39 — jcuenod
– jcuenod, Commented Jul 6, 2015 at 16:39

jcuenod · Accepted Answer · 2015-07-06 16:30:25Z

1

I would change your for loop:

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

Note your j variable is completely superfluous.

In the MDN docs for visibility you will find:

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.

emphasis mine

The solution above is essentially to use display: none

answered Jul 6, 2015 at 16:30

jcuenod

58.9k15 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mseifert Over a year ago

I tried display:none on the <tr> elements before I went into hiding the <td> elements. Not sure why I didn't try display:none on <td> before changing opacity. One oddity, it messes up the phone's calculation for zoom level so that the viewport doesn't exactly match the container. I have to zoom out so no scrolling is required. Something else to adjust. Thanks for your help.

Kyle · Accepted Answer · 2015-07-06 16:35:03Z

1

Try using CSS3 Media Queries.

E.g.

@media all and (max-width: 700px) {
table, tr, td {
    display: none;
}

When the width of your devices view-port is less than or equal to 700px the above display: none; will be used to hide your table, tr, td, or what have you.

answered Jul 6, 2015 at 16:35

Kyle

359 bronze badges

2 Comments

mseifert Over a year ago

Media queries would probably work in this case. I need js for changing other properties. Changing properties with js isn't compatible with CSS since they work at a different level => js works on the element level and @media queries work at the CSS level. I will give it a try a bit later anyway and verify. Thanks for the suggestion.

mseifert Over a year ago

+1 Yes, it works. I'm probably going to stick with the javascript, though since all the other viewport modifications need to be done there. Thanks!

Collectives™ on Stack Overflow

Hiding table columns with javascript - dynamically adjust layout

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related