Clever Geek Handbook

Hiding table column if contained cells are empty with jQuery

I have a table like this:

<table id="mytable" width="500" border="1" cellspacing="0" cellpadding="0">
  <thead>
  <tr>
    <th><span>1</th><th><span>2</th><th><span>3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><span>1/span></td>
    <td><span></span></td>
    <td><span>2/span></td>
  </tr>
  <tr>
    <td><span>1</span></td>
    <td><span></span></td>
    <td><span>2</span></td>
  </tr>
  <tr>
    <td><span>1</span></td>
    <td><span></span></td>
    <td><span>2</span></td>
  </tr>
  </tbody>
</table>

What I need to do is hide all columns of this table where the element <span>

contained in the table cell is empty. I will need to completely hide the cell, with the element <th>

on top. In my example above, this is the middle column, but there can be many, not just one.

Can anyone advise this?

Thanks in advance.

+2


source to share


3 answers


This should work:

$(document).ready(function() {
    hideEmptyCols($("#mytable"));
});

function hideEmptyCols(table) {
    //count # of columns
    var numCols = $("th", table).length;
    for ( var i=1; i<=numCols; i++ ) {
        var empty = true;
        //grab all the <td> of the column at i
        $("td:nth-child(" + i + ")", table).each(function(index, el) {
            //check if the <span> of this <td> is empty
            if ( $("span", el).text() != "" ) {
                empty = false;
                return false; //break out of each() early
            }
        });
        if ( empty ) {
            $("td:nth-child(" + i + ")", table).hide(); //hide <td>'s
            $("th:nth-child(" + i + ")", table).hide(); //hide header <th>
        }
    }
}


Or (easier):

function hideEmptyCols(table) {
    var rows = $("tr", table).length-1;
    var numCols = $("th", table).length;
    for ( var i=1; i<=numCols; i++ ) {
        if ( $("span:empty", $("td:nth-child(" + i + ")", table)).length == rows ) {
            $("td:nth-child(" + i + ")", table).hide(); //hide <td>'s
            $("th:nth-child(" + i + ")", table).hide(); //hide header <th>
        }
    }
}
+7


source


I would recommend adding a class to each th and td (something like "col_1", "col_2", etc.) and using to $("td").children("span:empty")

find the columns that should be hidden.



0


source


I created a version that might be slightly better than using a lot of CSS3 selectors in jQuery.

$(function () {
    var $table = $('#mytable'),
        $thead = $table.find('thead'),
        $tbody = $table.find('tbody');

    var isEmpty = {};
    $tbody.find('td').each(function () {

        var $this = $(this);
        if ( $this.text() == '' && isEmpty[ $this.index() ] != false ) {
            isEmpty[ $this.index() ] = true;
        } else {
            isEmpty[ $this.index() ] = false;
        }

    });

    for (var x in isEmpty) {
        if ( isEmpty[x] ) {
            $thead.find('th').eq( x ).remove();
            $tbody.find('td:nth-child(' + (parseInt(x, 10) + 1) + ')').remove();
        }
    }
});
0


source






More articles:


All Articles