如何根据行单元格值隐藏/显示表格列？答案

【问题标题】：How to hide/show table columns based on row cell values?如何根据行单元格值隐藏/显示表格列？
【发布时间】：2012-07-15 12:01:43
【问题描述】：

我有这张桌子：

<table class="mytbl">
 <thead>
  <tr>
    <th>dyn-tbl-hdr-1</th>  <----these actually are timestamps.
    <th>dyn-tbl-hdr-2</th>
    <th>dyn-tbl-hdr-3</th>
    <th>dyn-tbl-hdr-4</th>
    <th>dyn-tbl-hdr-5</th>
    <th>dyn-tbl-hdr-6</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>20</td>
   <td>50</td>
   <td>60</td>
   <td>20</td>
   <td>50</td>
   <td>60</td>
  </tr>
  <tr>
   <td>33</td>
   <td>5455</td>
   <td>4550</td>
   <td>245</td>
   <td>50566</td>
   <td>5678</td>
  </tr>
  <tr>
   <td>33433</td>
   <td>598455</td>
   <td>894550</td>
   <td>96245</td>
   <td>7050566</td>
   <td>4325678</td>
  </tr>
 </tbody>
</table>

我只想显示第一行值为 20（或 20 和 60）的那些“列”。我想根据任何行的单元格值显示/隐藏列。目标是仅显示给定行中单元格值匹配的那些列。（所以在上面的例子中只显示第 1 行包含 20 的那些列（如果用户想看到 20）。我可以只显示 ro1 包含 20 和 50 的那些列吗？我想我需要先选择一行，然后单元格值，然后根据该行和选定的单元格值隐藏列。但我不知道如何在 jquery 中编码。感谢所有帮助。

在我的应用表中是动态生成的。表头不是常量，它们实际上是时间戳。

【问题讨论】：

什么类型的事件应该调用过滤函数？点击、页面加载、更改、模糊、聚焦？

标签： javascript jquery css html-table

【解决方案1】：

试试这个：

var col = new Array();
$('tr').eq('1').find('td').each(function() {
    if ($(this).text() == 20 || $(this).text() == 50) {
        col.push($(this).index());
    }

});
$('th,td').each(function() {
    if ($.inArray($(this).index(), col)==-1) $(this).hide();
});

jsFiddle example

这会在表格的第一个非标题行中搜索 20 或 50 的值，并隐藏没有这些值的列。

【讨论】：

我最喜欢这个，它正是我想做的。多谢！！我想搬到 jqgrid，但我对此很满意。
这是此问题的延续：“如何根据行单元格值隐藏/显示表格列？”现在实现了，又出现了新的问题。一些表有非常多的列。（比如说大约 12000 列）。在具有足够 RAM 表的系统上正确显示，但隐藏列操作需要很长时间（几乎失败），得到对话框'脚本需要很长时间...... jquery......'。我怎样才能让它更快？泰。

【解决方案2】：

您可以使用 jQuery 中的 .each 函数来处理这个问题。

参考：http://api.jquery.com/jQuery.each/

jQuery：

$("td").each(function() {
    if ($(this).html() != 20) {
        $(this).css("opacity", "0");
    }
});

JsFiddle：http://jsfiddle.net/d2arY/

【讨论】：

【解决方案3】：

$('.mytbl tbody tr:first td').map(function(index, el) {

    if ($(el).text() == 60) 

             return $(el).index();  // get index of td that contain 60

}).each(function(i, val) {  // loop over those index

    $('.mytbl tbody td, .mytbl thead th').each(function() {

        $(this).parent().find('td, th').eq(val).hide(); // hide th and td with
                                                        // similar index
    });
});

Working sample

【讨论】：