如何使用JQuery隱藏和顯示HTML表中的列？

Question

我想通過點擊一個按鈕來使用JQuery來隱藏和顯示HTML表格上的列。我可以讓所有的細胞一次顯示並隱藏。我如何才能得到我單擊的列按鈕show and hide？

這裏是我用表的HTML：

<table width="500" border="1"> 
<tbody> 
    <tr align="center"> 
    <td><input type="button" value="Show/Hide" /></td> 
    <td><input type="button" value="Show/Hide"/></td> 
    <td><input type="button" value="Show/Hide"/></td> 
    <td><input type="button" value="Show/Hide"/></td> 
    <td><input type="button" value="Show/Hide"/></td> 
    </tr> 
    <tr> 
    <th scope="col">Column 1</th> 
    <th scope="col">Column 2</th> 
    <th scope="col">Column 3</th> 
    <th scope="col">Column 4</th> 
    <th scope="col">Column 5</th> 
    </tr> 
    <tr class="columnMe"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</tbody> 

這裏是JQuery的我到目前爲止：

$("document").ready(function() { 
$(":button").click(function() { 
    $('tr.columnMe td').toggle(); 
}); 
}); 

我想用這個（指向我單擊的按鈕），以便一個函數完成作業而不是每個單獨按鈕的功能。

所有幫助表示感謝！

邁克爾

Answer 1

這個問題已經得到了類似的解決方案在這裏：

Hide/Show Column in an HTML Table

我認爲這是你在找什麼。

問題是您需要向每列添加類，以便按鈕可以計算出它嘗試切換的位置。

您還需要爲每個按鈕指定不同的代碼，以將其分配給不同的列。

讓我知道你是否需要任何幫助！ :)

Answer 2

你可以這樣說：因爲你的按鈕也可以在表內

$("document").ready(function() { 
$(":button").click(function() { 
    var index = $(this).index(); //get clicked button index 
    $('tr.columnMe').each(function(i){ 
     //get n-th td from each tr and toggle it 
     $(this).find('td').get(index).toggle(); 
    } 
}); 
}); 

Answer 3

，你必須把它拿出來達到你想要..嘗試，這將幫助你什麼，

HTML：

<table id="tableone" border="1"> 
    <tr class="del"> 
     <td>Row 0 Column 0</td> 
     <td >Row 0 Column 1</td> 
     <td >Row 0 Column 2</td> 
    </tr> 
    <tr class="del"> 
     <td>Row 1 Column 0</td> 
     <td>Row 1 Column 1</td> 
     <td>Row 1 Column 2</td> 
    </tr> 
    <tr class="del"> 
     <td>Row 2 Column 0</td> 
     <td>Row 2 Column 1</td> 
     <td>Row 2 Column 2</td> 
    </tr> 
    <tr class="del"> 
     <td>Row 3 Column 0</td> 
     <td>Row 3 Column 1</td> 
     <td>Row 3 Column 2</td> 
    </tr> 
    <tr class="del"> 
     <td>Row 4 Column 0</td> 
     <td>Row 4 Column 1</td> 
     <td>Row 4 Column 2</td> 
    </tr> 
    <tr class="del"> 
     <td>Row 5 Column 0</td> 
     <td>Row 5 Column 1</td> 
     <td>Row 5 Column 2</td> 
    </tr> 
</table> 
<input id="btnHide" type="button" value="Hide Column 2"/> 

腳本：

$(document).ready(function() { 
      $('#btnHide').click(function() { 
       $('td:nth-child(2)').hide(); 
       // if your table has header(th), use this 
       //$('td:nth-child(2),th:nth-child(2)').hide(); 
      }); 
     }); 

希望它有幫助

Answer 4

這裏是您所要求的運行示例。 jsfiddle

我得到了單擊該按鈕的女巫中的td數量，然後將該數字的所有tds隱藏在其他行中。

$("document").ready(function() { 

$(".button").click(function() { 
    var t=$(this).parent('td'); 
    var number= $("td").index(t); 
    number=number+1; 
    $('tr.columnMe td:nth-child('+number+')').toggle(); 
}); 
}); 

UPDATE：

第一我用.toggle（）中加入jquery.it CSS功能「顯示：none'.with '顯示器' 的CSS屬性設置爲無，列移位但與CSS ATTR能見度：隱藏列的地方留在dom和元素是隱藏的。所以我更新了我的小提琴鏈接上面。

Answer 5

我已將號碼添加到您的td以查看效果。並添加btn類的按鈕

您的jQuery

$('.btn').on('click',function(){ 
    var getColIndex=parseInt($(this).closest('td').index()); 
    $('table tr').not('tr:eq(0)').each(function(){ 
     $(this).find(":nth-child("+(getColIndex+1)+")").toggleClass('hide'); 
    }); 
}); 

CSS：

.hide{ 
    visibility:hidden; 
} 

在這裏，如果你會使用 display:none則不會保留空間，所以我使用visibility:hidden;保留 空間。

DEMO

Answer 6

我已經修改了你的代碼一點點

HTML：

<table><tr align="center"> 
    <td><input type="button" id="1" value="Column 1" /></td> 
    <td><input type="button" id="2" value="Column 2"/></td> 
    <td><input type="button" id="3" value="Column 3"/></td> 
    <td><input type="button" id="4" value="Column 4"/></td> 
    <td><input type="button" id="5" value="Column 5"/></td> 
    </tr></table> 

<table id="myTable" width="500" border="1"> 
<tbody> 

    <tr> 
    <th scope="col">Column 1</th> 
    <th scope="col">Column 2</th> 
    <th scope="col">Column 3</th> 
    <th scope="col">Column 4</th> 
    <th scope="col">Column 5</th> 
    </tr> 
    <tr class="columnMe"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>&nbsp;1</td> 
    <td>&nbsp;2</td> 
    <td>&nbsp;3</td> 
    <td>&nbsp;4</td> 
    <td>&nbsp;5</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>&nbsp;11</td> 
    <td>&nbsp;22</td> 
    <td>&nbsp;33</td> 
    <td>&nbsp;44</td> 
    <td>&nbsp;55</td> 
    </tr> 
</tbody></table> 

腳本：

 var $colNumber; 
$("document").ready(function() { 
    $(function() { 

     $(":button").click(function() { 
     $colNumber=(this.id); 

    $('#myTable tr *:nth-child('+$colNumber+')').toggle(); 

     }); 

    }); 

}); 

您可以檢查它http://jsfiddle.net/J24yN/402/

Answer 7

編輯2：新增說明。

編輯：整理了一下。

試試這個。我修改了一下你的代碼。

HTML：

<table width="500" border="1"> 
<tbody> 
    <tr align="center"> 
    <td><input type="button" class="btnShowHide" value="Show/Hide1"/></td> 
    <td><input type="button" class="btnShowHide" value="Show/Hide2"/></td> 
    <td><input type="button" class="btnShowHide" value="Show/Hide3"/></td> 
    <td><input type="button" class="btnShowHide" value="Show/Hide4"/></td> 
    <td><input type="button" class="btnShowHide" value="Show/Hide5"/></td> 
    </tr> 
    <tr> 
    <th scope="col">Column 1</th> 
    <th scope="col">Column 2</th> 
    <th scope="col">Column 3</th> 
    <th scope="col">Column 4</th> 
    <th scope="col">Column 5</th> 
    </tr> 
    <tr class="columnMe"> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr class="columnMe"> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
</tbody> 

JS：

$('.btnShowHide').each(function(i) { 
    $(this).on('click', function() { 
     $('tr:not(:first-child) td:nth-child('+(i+1)+')').toggleClass('hide'); 
    }); 
}); 

說明：

tr:not(:first-child)選擇所有<tr>小號除了第一。 td:nth-child('+(i+1)+')'每i+1 -th選擇一個<td>，所以i+1列中的所有單元格都使用i索引中的.each()設置的函數。

這是fiddle。