Question

我想隐藏/显示表格列

在列上使用类
不向每个<td>

表格样本：

<table id="huge-table" border="1">
    <caption>A huge table</caption>

    <colgroup>
        <col class="table-0">
        <col class="table-0">
        <col class="table-1">
        <col class="table-1">
    </colgroup>

    <thead>
        <tr>
            <th>h1</th>
            <th>h2</th>
            <th>h3</th>
            <th>h4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
            <td>1,4</td>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
            <td>2,4</td>
        </tr>
    </tbody>
</table>

不幸的是$(".table-1").hide()不起作用。

所以我想按类获取列索引并将它们与nth-child选择器一起使用：

indexes = getColumnIndexesByClass("table-1");
for ( var i=0; i<indexes.length; i++ ) {
    $('#huge-table td:nth-child(indexes[i])').hide();
}

如何实施getColumnIndexesByClass功能或任何其他等效解决方案？

修改

表格大小未知。我只知道课程。

Answer 1

function getColumnIndexesByClass(class) {
    return $("." + class).map(function() {
        return $(this).index();
    }).get();
}

此函数返回一个数字数组。即。

getColumnIndexesByClass("table-1") === [2,3]

$.each(getColumnIndexesByClass("page-1"), function(key, val) {
    $("#hugetable td").filter(function() {
        return $(this).index() === val;
    }).hide();
});

以上内容将获取所有tds并将其过滤为特定索引中的tds。然后隐藏那些。

您可能希望进行更多缓存/优化。

Answer 2

试试这个（使用稍微修改过的Raynos函数版本）并查看demo：

function getColumnIndexesByClass(class) {
  return $("." + class).map(function() {
    return $(this).index() + 1; // add one because nth-child is not zero based
  }).get();
}

var indexes = getColumnIndexesByClass('table-1'),
    table = $('#huge-table');
for ( var i=0; i<indexes.length; i++ ) {
  table.find('td:nth-child(' + indexes[i] + '), th:nth-child(' + indexes[i] + ')').hide();
}

Answer 3

在jQuery中，您可以使用$('.table-0').index()来查找与其兄弟姐妹相关的第一个匹配元素的位置。

完整的例子是：

var classname = 'table-0';
var indices = $('.'+classname).map(function() {return $(this).index()+1}).get();
$.each(indices, function(iter, val) {
    $('td:nth-child('+val+'), th:nth-child('+val+')', '#huge-table').hide();
});

这也隐藏了标题。请注意，:nth-child计数从1开始。您也可以将它放在一行中，但它看起来会更难看。您可能还想定义一个用于选择索引的函数，但是目前代码只有3-5行（假设您已经有了类名）并且非常易读。

请阅读此处了解index方法的详细信息：http://api.jquery.com/index

已编辑：选择具有相同类的多个列，使用上下文。

如何在JavaScript中获取表列索引知道它的类？

修改

3 个答案: