套在一个Table中的Div不能隐藏

 

 

直接用图说话：

 

操作前：

 

操作后：

 

 

==============================================

本实验记录了这样一个问题：套在Table中的div不能隐藏。

 

如图所示， 当点“hideRow2And3_withDiv”按钮时，想把row2和row3一块子给隐藏掉，这两个row是套在div里的。可点了后，没反应。当点“hideRow2And3”按钮时，没问题。

 

代码如下：

 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
    
    function hideRows(){
    		$(".toHide").hide();
    }
    
    function hideRowsWithDiv(){
    		$(".toHideDiv").hide();
    }

</script>


<table>
	<tr>
		<td>row1</td><td>row1</td>
	</tr>
	
	
	<tr class = "toHide">
		<td>row2</td><td>row2</td>
	</tr>
	
	<tr class = "toHide">
		<td>row3</td><td>row3</td>
	</tr>
	
	<tr>
		<td>row4</td><td>row4</td>
	</tr>

</table>

<input type = "button" onclick = "hideRows()" value = "hideRow2And3" >

<hr>


<table>
	<tr>
		<td>row1</td><td>row1</td>
	</tr>
	
	<div class = "toHideDiv">
	
		<tr >
			<td>row2</td><td>row2</td>
		</tr>
		
		<tr >
			<td>row3</td><td>row3</td>
		</tr>
	
	</div>
	
	<tr>
		<td>row4</td><td>row4</td>
	</tr>

</table>

<input type = "button" onclick = "hideRowsWithDiv()" value = "hideRow2And3_withDiv" >