Question

我想获取表头的整个列。

例如，我想选择表头“Address”来隐藏地址栏，然后选择“Phone”标题来显示对应栏。

<table>
<thead> 
    <tr>
        <th id="name">Name</th>
        <th id="address">Address</th>
        <th id="address" class='hidden'>Address</th>
    </tr>
</thead> 
<tbody>
    <tr>
        <td>Freddy</td>
        <td>Nightmare Street</td>
        <td class='hidden'>123</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>Lost Street</td>
        <td class='hidden'>3456</td>
    </tr>
</tbody>

我想做http://www.google.com/finance?q=apl之类的事情（请参阅相关公司表）（点击“添加或删除列”链接）

Answer 1

这样的事情会起作用 -

$('th').click(function() {
    var index = $(this).index()+1;
    $('table td:nth-child(' + index + '),table th:nth-child(' + index + ')').hide()
});

如果单击标题，上面的代码将隐藏相关列，但逻辑可以根据您的要求进行更改。

演示 - http://jsfiddle.net/LUDWQ/

Answer 2

通过对HTML进行一些简单的修改，我会做类似以下的事情（无框架的JS）：

<强> HTML：

<input class="chk" type="checkbox" checked="checked" data-index="0">Name</input>
<input class="chk" type="checkbox" checked="checked" data-index="1">Address</input>
<input class="chk" type="checkbox" checked="checked" data-index="2">Phone</input>

<table id="tbl">
<thead> 
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Phone</th>
    </tr>
</thead> 
<tbody>
    <tr>
        <td>Freddy</td>
        <td>Nightmare Street</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>Lost Street</td>
        <td>3456</td>
    </tr>
</tbody>

<强>使用Javascript：

var cb = document.getElementsByClassName("chk");
var cbsz = cb.length;

for(var n = 0; n < cbsz ; ++n) {
    cb[n].onclick = function(e) {
        var idx = e.target.getAttribute("data-index");
        toggleColumn(idx);
    }
}

function toggleColumn(idx) {
    var tbl = document.getElementById("tbl");
    var rows = tbl.getElementsByTagName("tr");
    var sz = rows.length;

    for(var n = 0; n < sz; ++n) {
        var el = n == 0 ? rows[n].getElementsByTagName("th")[idx] : rows[n].getElementsByTagName("td")[idx];
        el.style.display = el.style.display === "none" ? "table-cell" : "none";
    }
}

http://jsfiddle.net/dbrecht/YqUNz/1/

我添加了复选框，因为将点击绑定到列标题是没有意义的，因为您无法切换可见性，只能隐藏它们。

Answer 3

最简单的方法是向每个匹配标题类的td添加一个类。单击时，它会检查该类，然后使用该类隐藏每个td。由于只有该列中的s会隐藏该类，因此它会有效地隐藏该列。

<table>
  <thead>
    <th>Name</th>
    <th>Address</th>
  </thead>
  <tbody>
    <tr>
       <td class="Name">Joe</td>
       <td class="Address">123 Main St.
  </tbody>
</table>

脚本如下：

$('th').click( function() {
  var col = $(this).html(); // Get the content of the <th>
  $('.'+col).hide(); // Hide everything with a class that matches the col value.
});

无论如何都是这样的。这可能比它需要的更冗长，但它应该证明原则。

另一种方法是简单地计算有问题的列数，然后循环遍历每一行并隐藏也是那么多列的td。例如，如果要隐藏地址列并且它是列＃3（索引2），那么您将遍历每一行并隐藏第三行（索引2）。

祝你好运..

Answer 4

您可以使用CSS执行某些操作，例如：

<html>
<head>
    <style>
        .c1 .c1, .c2 .c2, .c3 .c3{
            display:none;
        }
    </style>
</head>
<body>
<table class="c2 c3">
    <thead> 
        <tr>
            <th id="name" class="c1">Name</th>
            <th id="address" class="c2">Address</th>
            <th id="phone" class="c3">Phone</th>
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td class="c1">Freddy</td>
            <td class="c2">Nightmare Street</td>
            <td class="c3">123</td>
        </tr>
        <tr>
            <td class="c1">Luis</td>
            <td class="c2">Lost Street</td>
            <td class="c3">3456</td>
        </tr>
    </tbody>
</table>
</body>
</html>

要隐藏列，可以使用Javascript将相应的类添加到表中。这里隐藏了c2和c3。

您可以在样式标记中动态添加.c1，.c2，...或定义最大数字。

Answer 5

模拟Google财经显示/隐藏列功能：

http://jsfiddle.net/b9chris/HvA4s/

$('#edit').click(function() {
    var headers = $('#table th').map(function() {
        var th =  $(this);
        return {
            text: th.text(),
            shown: th.css('display') != 'none'
        };
    });

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
    $.each(headers, function() {
        h.push('<th><input type=checkbox',
               (this.shown ? ' checked ' : ' '),
               '/> ',
               this.text,
               '</th>');
    });
    h.push('</tr></thead></table></div>');
    $('body').append(h.join(''));

    $('#done').click(function() {
        var showHeaders = $('#tableEditor input').map(function() { return this.checked; });
        $.each(showHeaders, function(i, show) {
            var cssIndex = i + 1;
            var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
            if (show)
                tags.show();
            else
                tags.hide();
        });

        $('#tableEditor').remove();
        return false;
    });

    return false;
});

Answer 6

jQuery('thead td').click( function () {

    var th_index = jQuery(this).index();

    jQuery('#my_table tbody tr').each(
        function(index) {
            jQuery(this).children('td:eq(' + th_index + ');').each(
                function(index) {
                    // do stuff here
                }
            );
        }
    );
});

Answer 7

这是这种行为的工作小提琴：

http://jsfiddle.net/tycRW/

当然，隐藏列而不隐藏其标题会产生一些奇怪的结果。

如何从表头（th）中获取相应的表列（td）？

7 个答案: