Javascript 在HTML中隐藏、展开或显示列

我希望有一个包含10个列的表，但是当表第一次呈现时，我希望它只显示10个列中的7个，或者从中间隐藏3个列，比如说（不是最后3个或第一个）。然后，有一个按钮或其他东西，如果他们单击，它将展开表并将这些列插入正确的位置

这可能吗？我正在使用jQuery。我知道jQuery中有一个show和hide函数，但它似乎只适用于对象，例如整个段落或表，而不是特定的元素

目前我有：

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

第0行第0列
第0行第1列
第0行第2列
第1行第0列
第1行第1列
第1行第2列
第2行第0列
第2行第1列
第2行第2列
第3行第0列
第3行第1列
第3行第2列
第4行第0列
第4行第1列
第4行第2列
第5行第0列
第5行第1列
第5行第2列

您可以使用jquery实现这一点，为单击后要显示的列提供一些类似的类， 如果我理解正确，你可以试试下面

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

---

您可以查看jquery了解更多信息：

您可以使用CSS选择器仅选择所有TR中的特定TDs，如下所示： （计数从1开始，不是零！）

如果希望再次显示该列，可以执行以下操作：

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

---

如果您对任何和所有要隐藏的元素使用唯一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>

然后，您可以使用jQuery：

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

以及：

如果您的元素都是$（“.del”）.hide（）的同一类的一部分，这将不起作用；将仅隐藏该类的所有元素

---

希望我能帮助=）

您可以编写一个函数，它可以执行以下操作：

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

功能hssel（cls、from、fr、hs）{
如果（从<0开始）{
var chlds=$（'tr.+cls）.parent（）.children（）.length；
from=chlds+from；
}
对于（变量i=从+1开始，fr=（从+fr开始）||从+1开始；我尝试了什么？显示一些代码以调试标记以外的代码。因此，每个列都有一个不同的类？为要隐藏并在按钮单击时显示的列指定类似的类。具有相同类的列将在按钮单击时显示/隐藏。好的，这样就可以了，但是如何自动隐藏第2列和第3列呢表加载时开始？然后他们会单击show，它会显示出来这很有帮助，谢谢！但这里我只删除具有相关ID的行…要删除列，我会为每个元素分配一个类吗？是的，您可以为元素分配一个类或一个ID，请记住，如果您使用类，jQuery将使用ide识别并将指定的函数应用于该类的所有元素。如果使用id，请确保没有id被多次使用，该id对于每个元素都是唯一的，如果将其分配给多个元素，则会导致问题。哦，该死的，我搞砸了列和列，糟糕。
$(document).ready(function(){
$("#del3").hide();
$("#del4").hide();
});

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

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

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