如何根據行單元格值隱藏/顯示錶列？

Question

我有這樣的表：

<table class="mytbl"> 
<thead> 
    <tr> 
    <th>dyn-tbl-hdr-1</th> <----these actually are timestamps. 
    <th>dyn-tbl-hdr-2</th> 
    <th>dyn-tbl-hdr-3</th> 
    <th>dyn-tbl-hdr-4</th> 
    <th>dyn-tbl-hdr-5</th> 
    <th>dyn-tbl-hdr-6</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>20</td> 
    <td>50</td> 
    <td>60</td> 
    <td>20</td> 
    <td>50</td> 
    <td>60</td> 
    </tr> 
    <tr> 
    <td>33</td> 
    <td>5455</td> 
    <td>4550</td> 
    <td>245</td> 
    <td>50566</td> 
    <td>5678</td> 
    </tr> 
    <tr> 
    <td>33433</td> 
    <td>598455</td> 
    <td>894550</td> 
    <td>96245</td> 
    <td>7050566</td> 
    <td>4325678</td> 
    </tr> 
</tbody> 
</table> 

我想只顯示那些值在第一行20（或20和60）「列」。我想基於任何行的單元格值顯示/隱藏列。目標是僅顯示給定行中單元格的值匹配的列。 （所以在上面的例子中，只顯示那些第1行包含20的列（如果用戶想看到20）。我可以只顯示那些ro1包含20和50的列嗎？我想我需要先選擇一行，然後單元格的值，然後根據該行和選定的單元格值隱藏列。但我不知道如何在jquery中編寫代碼。實際上時間戳

Answer 1

試試這個：

var col = new Array(); 
$('tr').eq('1').find('td').each(function() { 
    if ($(this).text() == 20 || $(this).text() == 50) { 
     col.push($(this).index()); 
    } 

}); 
$('th,td').each(function() { 
    if ($.inArray($(this).index(), col)==-1) $(this).hide(); 
});​ 

jsFiddle example

這會在表格的第一個非標題行中搜索20或50的值，並隱藏不具有這些值的列。

Answer 2

您可以使用jQuery的從該.each函數來處理這個

參考：。http://api.jquery.com/jQuery.each/

jQuery的：

$("td").each(function() { 
    if ($(this).html() != 20) { 
     $(this).css("opacity", "0"); 
    } 
});​ 

的jsfiddle：http://jsfiddle.net/d2arY/

Answer 3

$('.mytbl tbody tr:first td').map(function(index, el) { 

    if ($(el).text() == 60) 

      return $(el).index(); // get index of td that contain 60 

}).each(function(i, val) { // loop over those index 

    $('.mytbl tbody td, .mytbl thead th').each(function() { 

     $(this).parent().find('td, th').eq(val).hide(); // hide th and td with 
                 // similar index 
    }); 
}); 

Working sample