Question

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

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

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

代码如下：

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

如何为每列添加按钮（或其他内容），以便隐藏/显示列？我无法向TD添加课程。这在jquery中可能吗？

Answer 1

好吧首先，因为table被构造为带有单元格的行，为了选择整个列，您需要在所有行上使用:nth-of-type选择器来单独选择它们的单元格。

$('table td:nth-of-type(1),table th:nth-of-type(1)');

请注意，我们同时选择<td>和<th>来选择标题。

现在，如果您只需要隐藏功能，您确实可以为每个列添加一个按钮以隐藏目的：

$(function () {
    $('table th').each(function () {
        $('<button>Hide</button>').appendTo($(this)).click(function () {
            var column_index = $(this).parent().index()+1;
            $('table td:nth-of-type('+column_index+'),table th:nth-of-type('+column_index+')').hide();
        });
    });

});

的 Example 1

但是，如果您需要再次显示列，则需要单独放置按钮，否则它们将与列一起消失。

例如，您可以在文本框中指定要隐藏/显示的列的索引，如下所示：

添加到html：

<input id="col_hide" placeholder="insert col index 1+"></input> <input type="submit" id="bt_hide" value="hide/show" />

JS：

$(function () { $('#bt_hide').click(function () { var column_index = $('#col_hide').val(); $('table td:nth-of-type(' + column_index + '),table th:nth-of-type(' + column_index + ')').toggle(); }); });

的 Example 2

或者如果您希望您的表格更加用户友好，您可以在表格外的每列创建一个按钮：

JS：

$(function () { $('table th').each(function (_id, _value) { $('<button>Toggle ' + parseInt(_id + 1) + '</button>').appendTo($("#togglers")).click(function (e) { $('table td:nth-of-type(' + parseInt(_id + 1) + '),table th:nth-of-type(' + parseInt(_id + 1) + ')').toggle(); e.preventDefault(); }); }); });

的 Example 3

Answer 2

您可以使用数据表

来实现此目的

http://datatables.net/examples/api/show_hide.html

这是一个javacript代码

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

Answer 3

好问题。使用jQuery处理表列非常困难。

如果您不能使用课程，则需要使用 CSS3高级选择器或jQuery选择器。

像这样：

$(document).ready(function(){

    $('table td, table th').addClass('visible'); // visible as default

    $('table').append('<tr class="last-row" />').each(function(){ // add the last row with switch buttons
         $('table tr:first-child th').each(function(){


          $('.last-row').append('<td class="stay-visible"><button class="show-hide-btn">Hide</button></td>');
        });

    });


    // Then manage the buttons
    $(document).on('click', '.show-hide-btn', function(){
       var parentIndex = $(this).parent().index()+1;

       var $currentColumn = $('table td:nth-child('+parentIndex+'), table th:nth-child('+parentIndex+')'); 

       if($currentColumn.hasClass('visible')){
          $(this).text('Show');

       }
       else {
          $(this).text('Hide');
       }
        $currentColumn.each(function(){
            $(this).toggleClass('visible')
        });
    });


});

更新：

工作示例：http://jsfiddle.net/H9Zb7/1/

Answer 4

感谢@Banana！

这是我使用的代码：

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

我使用 _id＆gt; 2 因为我不需要过滤前三列。

隐藏/显示列

4 个答案: