套在一個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" >