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

最新推荐文章于 2022-10-30 16:01:45 发布

最新推荐文章于 2022-10-30 16:01:45 发布 · 544 阅读

文章标签：

#jQuery #HTML #ViewUI

JavaScript/JSON/Ajax/ext... 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了一个具体的前端开发问题：如何通过JavaScript隐藏包含在div标签内的表格行。通过对比两种不同情况的操作效果，文章详细说明了隐藏普通表格行与嵌套在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" >