Question

我正在尝试使用JQuery通过单击按钮来隐藏和显示HTML表格上的列。我可以让我的所有细胞立刻显示和隐藏。如何获得我点击的列按钮显示和隐藏？

以下是我用于表格的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();
});
});

我想使用THIS（指向我点击的按钮），这样一个函数就能完成工作而不是每个单独按钮的功能。

所有帮助表示赞赏！

迈克尔

Answer 1

这是您请求的一个runnign示例。 jsfiddle

我得到了按钮被点击的女巫数量，然后隐藏了其他行中所有该数字的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();
});
});

更新：

首先我在jquery.it中使用了.toggle（）函数添加了css'display：none'.with'display'css属性设置为none，列移位了但是css attr可见性：隐藏列的位置保留在dom中隐藏了元素。所以我更新了上面的小提琴链接。

Answer 2

这个问题在这里已经得到了类似的解决方案：

Hide/Show Column in an HTML Table

我认为这就是你要找的东西。

问题是您需要为每个列添加类，以便按钮可以在尝试打开和关闭的位置找到它。

您还需要为每个按钮指定不同的代码，以将其分配给不同的列。

如果您需要更多帮助，请告诉我们！：）

Answer 3

你可以这样做：

$("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 4

既然你的按钮也在桌子内，你必须把它拿出去实现你想要的东西..尝试这会对你有帮助，

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 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每个<td>，i+1列中的所有单元格，使用来自i设置的函数的.each()索引}。

这是fiddle。

如何使用JQuery隐藏和显示HTML表中的列？

7 个答案: