使用 JQuery 隐藏表格列答案

【问题标题】：Hiding Table Columns With JQuery使用 JQuery 隐藏表格列
【发布时间】：2009-06-17 16:56:13
【问题描述】：

此方法用于根据元数据 json 对象的集合隐藏表中的列。表中的每列都有一个对象。目前在一个有约 500 行和约 15 列的表上，其中 6 列被隐藏，此方法需要约 2 秒才能执行。

我正在尝试优化它以使其更快。有什么建议吗？

function hideHiddenColumns() {
  if (tableMetaData.length) {
    for (var index = 0; index < tableMetaData.length; index++) {
      var item = tableMetaData[index];
      if (!item.DisplayFlag) {
        $table.find('th:nth-child(' + (index + 1) + '), td:nth-child(' + (index + 1) + ')').hide();
      }
    }
  }
}

【问题讨论】：

标签： jquery optimization performance

【解决方案1】：

我不确定$table 来自哪里，但是用旧的 DOM 代替复杂的 jQuery 选择器怎么样：

$table.each( function() {
  var rows = this.rows;
  var rowCount = rows.length;

  for (var i = 0; i < rowCount; i++) {
    var cells = rows[i].cells;
    if (cells.length > index) {
      $(cells[index]).hide();
    }
  }
});

显然，这意味着表格中不存在合并的单元格。

【讨论】：

【解决方案2】：

使用纯 JS，就像 Tomalak 建议的那样。您还可以使用while 优化for 循环：

var item, i = tableMetaData.length;
while (i--) {
  item = tableMetaData[i];
  // do what's gotta be done
}

反向的while 循环曾经是迄今为止最快的循环结构。随着最新 JS 引擎的最新改进，差异不再那么大了

【讨论】：

【解决方案3】：

这是一种显示和隐藏 HTML 表格列的方法：jQuery - Tables - Show and Hide Columns

【讨论】：