隐藏，然后在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示例
的用法与行相同