隱藏表列，如果含有細胞是空的jQuery

，我有以下類型的表：隱藏表列，如果含有細胞是空的jQuery

<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>

我需要做的是 - 隱藏在<span>元素包含在這個表中的所有列由表格單元格爲空。我需要將單元完全隱藏起來，頂部有<th>元素。在我上面的例子中，它是中間一列，但可能有很多，不僅有一個。

有人可以提供這方面的建議嗎？

在此先感謝。

來源

2012-01-25 cycero

這應該工作：

$(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>'s 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> 
     } 
    } 
}

或（簡單）：

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

來源

2012-01-25 13:29:09

它的確如此！謝謝！ – cycero

感謝您的幫助@maclema。你還可以建議是否可以「跳過」表中的第一列，而不是隱藏它？這種情況是，第一列由標籤組成，內部沒有，它是一種桌面垂直標題，我不想在隱藏功能的同時隱藏它。 – cycero

得到它的工作，只需添加$（「th：nth-child（1）」，table）.show（）;到底。如果連函數隱藏了第一列，我都會明確地顯示它。 – cycero

我會建議增加一類，以每個th和td（類似「COL_1」，「COL_2」等）並使用$("td").children("span:empty")來查找應該隱藏的列。

來源

2012-01-25 13:34:51

我創建了一個版本，可能比在jQuery中使用很多CSS3選擇器更好一點。

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

來源

2012-01-25 13:54:07

這隻隱藏了6列中的3列。 – cycero

隱藏表列，如果含有細胞是空的jQuery

回答

相關問題