Question

我在点击它的标题时隐藏了列。我的表有列跨度和行跨。我正在使用的代码是

selector = " > tbody > tr:has(td) td:nth-child(" + Ix + ")";

$(tbl).find(selector).each(function () {

    if (rIx > 0) {
            HideAndShowEle($(this)[0], bShow, true);
    }

})

隐藏超过200行和20列的大表非常慢。帮助我找到以更好的方式选择特定列td的任何其他方法

Answer 1

点击标题会隐藏列。

jsFiddle

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



<table>
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
</tbody>
</table>

Answer 2

selector = $('table tbody').has('td').children(Ix)

$（selector）.each（function（）{

if (rIx > 0) {
        HideAndShowEle($(this)[0], bShow, true);
}

}）

Answer 3

我对列的首选技术（假设您没有具有多个列跨度的单元格）是为每列使用唯一的css类，并简单地将该类用作其选择器。它不必与实际的css类相对应，它只需要是可识别的。

<table class="firstTable">
  <tr>
    <td class="column1"></td>
    <td class="column2"></td>
    <td class="column3"></td>
  </tr>
  <tr>
    <td class="column1"></td>
    <td class="column2"></td>
    <td class="column3"></td>
  </tr>
</table>

<table class="secondTable">
  <tr>
    <td class="column1"></td>
    <td class="column2"></td>
    <td class="column3"></td>
  </tr>
  <tr>
    <td class="column1"></td>
    <td class="column2"></td>
    <td class="column3"></td>
  </tr>
</table>

现在使用常用选择器可以隐藏列：

$(".firstTable .column2").hide();

要从标题中的链接进行此操作，您可以为链接提供数据属性，以指示它所在的列或使用它的父级。

<a href="#" data-column="column2" data-table="firstTable" class="columnHeader">Column Header</a>

$(".columnHeader").click(function(event) {
    var col = $(this).attr("column");
    var table = $(this).attr("table");
    $("." + table + " ." + col).hide();
});

这个已发布的代码中存在明显漏洞，主要是因为我不知道您的具体要求或页面结构，但此处的概念应该具有相当的适应性。

提高隐藏表格列的性能

3 个答案: