jquery - 提高隐藏表列的性能

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

我对列的首选技术（假设您没有具有多个列跨度的单元格）是为每列使用唯一的 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();
});

这个发布的代码有明显的漏洞，主要是因为我不知道你的具体要求或页面结构，但这里的概念应该是相当适应的。

Answer 3

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

$(选择器).each(函数 () {

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

})