-2

我想要一个表格，让我们说总共 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>
4

4 回答 4

1

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

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

您可以查看 jquery 以获取更多信息：http ://www.jquery.com

于 2012-07-19T15:37:03.607 回答
0

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

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示例
的用法与行的用法相同

于 2012-07-19T16:35:04.360 回答
0

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

​$('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();
        });
    }​);
于 2012-07-19T15:45:13.130 回答
0

也许如果您对想要隐藏的任何和所有元素使用唯一 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").hide(); 属于同一类的元素；只会隐藏该类的所有元素。

希望我有所帮助=)

于 2012-07-19T15:47:53.173 回答