【重要】隐藏状态设置属于功能性元素,可以附加在已有的样式之上,它作用于其设定的 DOM 结构位置。

  1. 初始外观

    序号 表头 表头 表头
    1      
    2      
    3      
    4      
    5      
  2. 设置后外观

    隐藏第二行:

    序号 表头 表头 表头
    1      
    2      
    3      
    4      
    5      
    <div class="c_table">
    	<table>
    		<tbody>
    			<tr>
    				<td>1</td>
    			</tr>
    			<tr class="e_hide">
    				<td>2</td>
    			</tr>
    			<tr>
    				<td>3</td>
    			</tr>
    			<tr>
    				<td>4</td>
    			</tr>
    			<tr>
    				<td>5</td>
    			</tr>
    		</tbody>
    	</table>
    </div>
    
  3. 扩展功能

    1. 批量隐藏

      同时隐藏 1、3、5 行

      序号 表头 表头 表头
      1      
      2      
      3      
      4      
      5      

      代码分两步,首先给需要隐藏的对象预设标记。

      <div class="c_table">
      	<table>
      		<tbody>
      			<tr class="e_hideX">
      				<td>1</td>
      			</tr>
      			<tr>
      				<td>2</td>
      			</tr>
      			<tr class="e_hideX">
      				<td>3</td>
      			</tr>
      			<tr>
      				<td>4</td>
      			</tr>
      			<tr class="e_hideX">
      				<td>5</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      

      然后,在需要批量隐藏的时候,动态地给在它们的某一父(或者祖先)节点上设置 e_hide-x。

      <div class="c_table e_hide-x">
      	<table>
      		<tbody>
      			<tr class="e_hideX">
      				<td>1</td>
      			</tr>
      			<tr>
      				<td>2</td>
      			</tr>
      			<tr class="e_hideX">
      				<td>3</td>
      			</tr>
      			<tr>
      				<td>4</td>
      			</tr>
      			<tr class="e_hideX">
      				<td>5</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      

      这样的设置方法,是可以跨组件进行的。