隐藏/显示列 [英] Hide/show column

问题描述

在HTML中，是否可以显示/隐藏列？

例如，我们有一个像这样的表：

  ID颜色编号
 1＃990000 C001 
 2＃009900 C002 
 3 #FFFFFF C003 
 4＃000000 C004 
  

代码如下：

 <表> 
< tr> 
< th class =Title> ID< / th> 
  < / tr> 
< tr> 
< td> 1< / td> 
< td>＃990000< / td> 
< td> C001< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td>＃009900< / td> 
< td> C002< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td>＃FFFFFF< / td> 
< td> C003< / td> 
< / tr> 
< tr> 
< td> 4< / td> 
< td>＃000000< / td> 
< td> C004< / td> 
< / tr> 
< / table> 
  

如何为每列添加按钮（或别的东西），以便我可以隐藏/显示柱？我不能将类添加到TD的。这是可能的jQuery中？

解决方案

感谢@Banana！

这是我使用的代码：

 < script src = http://code.jquery.com/jquery.min.js >< /脚本> 
< script type =text / javascript> 
 $（function（）{
 $（'table th'）。each（function（_id，_value）{
 if（_id> 2）{
 $（' < span>'+ $（this）.find（a）。text（）+'< / span>'）。appendTo（$（＃togglers））。click（function（e）{
 $（'table td：nth-​​of-type（'+ parseInt（_id + 1）+'），table th：nth-​​of-type（'+ parseInt（_id + 1）+'）'）。 toggle（）; 
 e.preventDefault（）; 
}）; 
} 
}）; 
 
}）; 
< / script> 
< div id =togglers>< / div> 
  

我使用 _id> 2 ，因为我不需要过滤前三列。

In html, is it possible to show/hide columns?

For example we have a table like this:

ID    Color    Number 
1    #990000    C001
2    #009900    C002
3    #FFFFFF    C003
4    #000000    C004

The code would be like this:

<table>
    <tr>
        <th class="Title">ID</th>
        <th class="Title">Color</th>
        <th class="Title">Number</th>
    </tr>
    <tr>
        <td>1</td>
        <td>#990000</td>
        <td>C001</td>
    </tr>
    <tr>
        <td>2</td>
        <td>#009900</td>
        <td>C002</td>
    </tr>
    <tr>
        <td>3</td>
        <td>#FFFFFF</td>
        <td>C003</td>
    </tr>
    <tr>
        <td>4</td>
        <td>#000000</td>
        <td>C004</td>
    </tr>
</table>

How can I add a button (or something else) for each column so I can hide/show the column? I can't add classes to TD's. Is this possible in jquery?

解决方案

Thanks to @Banana!

This is the code I use:

<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('table th').each(function (_id, _value) {
        if(_id > 2){
            $('<span>'+$(this).find("a").text()+'</span>').appendTo    ($("#togglers")).click(function (e) {
                $('table td:nth-of-type(' + parseInt(_id + 1) + '),table     th:nth-of-type(' + parseInt(_id + 1) + ')').toggle();
                e.preventDefault();
            });
        }
    });

});
</script>
<div id="togglers"></div>

I use _id > 2 because I don't need to filter on first three columns.

这篇关于隐藏/显示列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！