如何在非常长的html表中隐藏列 [英] How to hide columns in very long html table

问题描述

我有一个有20列和约一千行的表。我想根据过滤器显示/隐藏不同的列，即每个过滤器显示与该过滤器相关的列，并隐藏不是列。

我试过两个方法：

1）使用jQuery基于列的索引向TH和TD添加隐藏类。这是非常慢的，因为类必须添加到每个表格单元格被隐藏。

2）添加一个隐藏类COLGROUP在COLGROUP顶部的表。这里的问题是，当样式规则（如display：none或visibility：collapse）添加到COL中时，并非所有浏览器都会将这些规则应用于表中的相应列，因为单元格不是COL的子代。

任何建议？

解决方案

要隐藏整列， ：

  // HTML 
< table id =my-tableclass =no-filter> ; 
< tr> 
< td class =column column1> c1< / td> 
< td class =column column2> c2< / td> 
< td class =column column3> c3< / td> 
< / tr> 
 // etc x1000 
< / table> 
 
 // CSS 
 table td.column {display：none; } / *默认情况下所有列都隐藏* / 
 table.no-filter td.column {display：block; } / * no-filter显示_all_ columns * / 
 table.filter1 td.column1 {display：block; } 
 table.filter2 td.column2 {display：block; } 
 table.filter3 td.column3 {display：block; } 
  

如果只想显示column1：

  $（＃my-table）。removeClass（no-filter）。addClass（filter1）; 
  

如果要显示column1 和 column3：

  $（＃my-table）removeClass（no-filter）。addClass（filter1）。addClass ）; 
  

如果您需要一对多过滤器

  table.filter4 td.column4，
 table.filter4 td.column5，
 table.filter4 td.column99 {display：block; } 
 / * filter 4显示列4 5和99 * / 
  

过滤器可以重叠：

  table.filter5 td.column5 {display：block; } 
 table.filter6 td.column5，
 table.filter6 td.column6 {display：block; } 
  

---

这假设您的过滤器是预先定义的，你知道过滤器到列的映射。

小调：我没有测试这个，可能有优先问题。如果过滤器未正确应用，请将 td.columnX 更改为 td.column.columnX p>

I have a table with 20 columns and about a thousand rows. I want to show/hide different columns based on filters, i.e. each filter displays columns that are relevant to that filter and hides columns that aren't.

I have tried two approaches:

1) Add a "hide" class to the THs and TDs based on the index of the column using jQuery. This is incredibly slow as the class has to be added to each table cell to be hidden.

2) Add a "hide" class to the COLs within a COLGROUP at the top of the table. The problem here is that when style rules like "display: none" or "visibility: collapse" are added to COLs, not all browsers apply those rules to the corresponding columns within the table because the cells are not children of COLs.

Any suggestions?

解决方案

To hide whole columns you can use a stacking definition:

// HTML
<table id="my-table" class="no-filter">
  <tr>
    <td class="column column1">c1</td>
    <td class="column column2">c2</td>
    <td class="column column3">c3</td>
  </tr>
  // etc x1000
</table>

// CSS
table td.column { display: none; } /* by default all columns are hidden */
table.no-filter td.column { display: block; } /* no-filter shows _all_ columns */
table.filter1 td.column1 { display: block; }
table.filter2 td.column2 { display: block; }
table.filter3 td.column3 { display: block; }

If you want to show just column1:

$("#my-table").removeClass("no-filter").addClass("filter1");

If you want to show column1 and column3:

$("#my-table").removeClass("no-filter").addClass("filter1").addClass("filter3");

If you need one-to-many filters

table.filter4 td.column4,
table.filter4 td.column5,
table.filter4 td.column99 { display: block; }
/* filter 4 shows column 4 5 and 99 */

Filters can overlap:

table.filter5 td.column5 { display: block; }
table.filter6 td.column5,
table.filter6 td.column6 { display: block; }

---

This assumes your filters are pre-defined and you know the filter-to-column mapping.

Minor note: I haven't tested this, there might be precedence issues. If the filters aren't applying properly change td.columnX to td.column.columnX

这篇关于如何在非常长的html表中隐藏列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！