隱藏，然後在HTML中展開或顯示一列

Question

我想要一個表，讓我們說10個總列，但是當表第一次呈現時，我希望它只顯示10箇中的7個，或者隱藏3個列從中間讓我們說（不是結束3或第一）。然後，有一個按鈕或其他東西，如果他們點擊，它會展開表格並將這些列插入到正確的位置。

這可能嗎？我正在使用jQuery。我知道在jQuery中有一個顯示和隱藏功能，但它似乎只適用於對象，例如作爲一個整體的段落或表格，而不是特定的元素。

目前我有這樣的：

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

Answer 1

你可以做到這一點使用jQuery，給一些相似的類到你想要的點擊後顯示，列 如果我理解正確的，你可以試試下面

$("button").on("click", function(){ 
    $("class_of_the_colums").toggle(); 
} 

，你可以看看jQuery的更多信息：http://www.jquery.com

Answer 2

您可以使用CSS選擇器來只選擇s所有的TR如下內pecific陣： （計數從1開始，而不是0！）

​$('tr td:nth-child(2)').hide()​​​​​​​​​​​​​​​​​​​​​​​​; 

當你想柱再次顯示，你可以這樣做：

​$('tr td:nth-child(2)').show()​​​​​​​​​​​​​​​​​​​​​​​​; 

如果您正在計劃改變要隱藏的列數或他們的位置，您最好將這些列分配給這些列並使用$('.className').hide()，但在與上述示例相同的波長上，您應該這樣做：

$(document).ready(function() { 
     // Creates a reference to columns 2 and 3; 
     var $columnsToHide = $('tr td:nth-child(2), tr td:nth-child(3)'); 
     // Hides them 
     $columnsToHide.toggle(); 
     // if element with id buttonID is clicked 
     $('#buttonID').on('click', function() { 
      // show the columns 
      $columnsToHide.toggle(); 
     }); 
    }​); 

Answer 3

或許，如果你使用的唯一ID的任何及所有元素要隱藏，如：

<table id="tableone" border="1"> 
<tr id="del1"> 
<td>Row 0 Column 0</td> 
<td >Row 0 Column 1</td> 
<td >Row 0 Column 2</td> 
</tr> 
<tr id="del2"> 
<td>Row 1 Column 0</td> 
<td>Row 1 Column 1</td> 
<td>Row 1 Column 2</td> 
</tr> 
<tr id="del3"> 
<td>Row 2 Column 0</td> 
<td>Row 2 Column 1</td> 
<td>Row 2 Column 2</td> 
</tr> 
<tr id="del4"> 
<td>Row 3 Column 0</td> 
<td>Row 3 Column 1</td> 
<td>Row 3 Column 2</td> 
</tr> 
<tr id="del5"> 
<td>Row 4 Column 0</td> 
<td>Row 4 Column 1</td> 
<td>Row 4 Column 2</td> 
</tr> 
<tr id="del6"> 
<td>Row 5 Column 0</td> 
<td>Row 5 Column 1</td> 
<td>Row 5 Column 2</td> 
</tr> 

然後，在你的CSS樣式，在這裏你有.DEL你將它改爲：

#del1, 
#del2, 
#del3, 
#del4, 
#del5, 
#del6{ 
properties 
} 

然後用你的jQuery你可以使用：

$(document).ready(function(){ 
$("#del3").hide(); 
$("#del4").hide(); 
}); 

和：

$("#id_of_button_that_will_show_the_hidden_elements").click(function(){ 
$("#del3").show(); 
$("#del4").show(); 
}); 

這不適用於所有與$（「。del」）相同類的元素。將只隱藏該類的所有元素。

希望我幫助=）

Answer 4

你可以寫一個函數，它確實是這樣的：

function hssel(cls,from,fr,hs) { 
    if (from < 0) { 
var chlds = $('tr.'+cls).parent().children().length; 
    from = chlds + from; 
    } 
    for (var i = from+1,fr = (from+fr)||from+1 ;i <= fr ;i++) { 
    $('tr.'+cls+':nth-child('+i+')')[(hs=="show"?"show":"hide")](); 
    } 
} 

//hssel("del",0) //would hide the first row with the class del 
//hssel("del",0,3) //would hide the first three rows 
//hssel("del",-3,3) //would hide the last three rows 
//hssel("del",-3,3,"show"); //would show the last three rows 
hssel("del",-3,3); 

下面是一個例子JSBin
這裏是^^

列相同的功能

function hssel(cls,from,fr,hs) { 
    if (from < 0) { 
    var chlds = $('tr.'+cls+':first-child').children().length; 
    console.log(chlds); 
    from = chlds + from; 
    } 
    for (var i = from+1,fr = (from+fr)||from+1 ;i <= fr ;i++) { 
    $('tr.'+cls+' td:nth-child('+i+')')[(hs=="show"?"show":"hide")](); 
    } 
} 

而JSBin示例
的用法與行相同