Удалить/скрыть пустой столбец таблицы, включая <th>

Как я могу скрыть столбец со всеми пустыми ячейками, включая заголовок <th> в этом столбце, оставив остальные столбцы и их названия как есть. После jquery скрывается весь <th>, чего я не хочу. Здесь - образец, в котором я хочу скрыть только весь столбец3, включая <th>. Большое спасибо заранее.

$('table#mytable tr').each(function() {
    if ($(this).children('td:empty').length === $(this).children('td').length) {
        $(this).hide();
    }
});

Ответ 1

Взял время, чтобы скомпоновать. Благодаря nxt для некоторого кода.

$('#mytable th').each(function(i) {
    var remove = 0;

    var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
    tds.each(function(j) { if (this.innerHTML == '') remove++; });

    if (remove == ($('#mytable tr').length - 1)) {
        $(this).hide();
        tds.hide();
    }
});

Ответ 2

Если вы хотите скрыть столбец, если все ячейки (игнорируя заголовок) пусты, вы можете сделать что-то вроде:

$('#mytable tr th').each(function(i) {
     //select all tds in this column
     var tds = $(this).parents('table')
              .find('tr td:nth-child(' + (i + 1) + ')');
        //check if all the cells in this column are empty
        if(tds.length == tds.filter(':empty').length) { 
            //hide header
            $(this).hide();
            //hide cells
            tds.hide();
        } 
});

Пример: http://jsfiddle.net/DeQHs/

Пример 2 (адаптирован для jQuery > 1.7): http://jsfiddle.net/mkginfo/mhgtmc05/

Ответ 3

http://jsfiddle.net/nlovatt/JsLn8/

Пример с несколькими таблицами, который позволяет избежать использования идентификатора таблицы в селекторах

Ответ 4

Ни одно из решений здесь не работало. Это было то, что я использовал, чтобы скрыть пустые столбцы с текстом в заголовке или без него:

    $('table').each(function(a, tbl) {
        var currentTableRows = $(tbl).find('tbody tr').length;
        $(tbl).find('th').each(function(i) {
            var remove = 0;
            var currentTable = $(this).parents('table');

            var tds = currentTable.find('tr td:nth-child(' + (i + 1) + ')');
            tds.each(function(j) { if ($(this).text().trim() === '') remove++; });

            if (remove == currentTableRows) {
                $(this).hide();
                tds.hide();
            }
        });
    });

Ответ 5

Вам нужен следующий код:

HTML

<table id="mytable" border="1">
    <thead>
        <tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
    </thead>
    <tbody>
        <tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr>
        <tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr>  
        <tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr>  
        <tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr>
    </tbody>
</table>

JavaScript

var $table = $('#mytable');
var thead = $table[0].tHead, tbody = $table[0].tBodies[0];
var colsLen = tbody.rows[0].cells.length, rowsLen = tbody.rows.length;
var hideNode = function(node) { if (node) node.style.display = "none"; };
for (var j = 0; j < colsLen; ++j) {
    var counter = 0;
    for (var i = 0; i < rowsLen; ++i) {
        if (tbody.rows[i].cells[j].childNodes.length == 0) ++counter;
    }
    if (counter == rowsLen) {
        for (var i = 0; i < rowsLen; ++i) {
            hideNode(tbody.rows[i].cells[j]);
        }
        hideNode(thead.rows[0].cells[j]);
    }
}

Ответ 6

Если данные таблицы из запроса MySQL позволяют проверить, пустой ли столбец, используя счетчик в поле (count = 0 означает, что нет значений).

Это довольно сообразительно, когда у вас много полей, и условие IF необходимо для соответствующих ящиков заголовка и нижнего колонтитула. Но он работает...

if ($sum_field>'0') echo "<th>field</th>";
if ($sum_field>'0') echo "<td>" . $row['field'] . "</td>";

Решение @nmat отлично работает, но не обрабатывает нижние колонтитулы.