`

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


 

 

  • 大小: 6.5 KB
  • 大小: 6.2 KB
0
1
分享到:
评论
2 楼 rmn190 2010-10-14  
fashionia 写道
有你这么写html的吗?
先去看看w3c吧


呵呵, 多谢!
1 楼 fashionia 2010-10-13  
有你这么写html的吗?
先去看看w3c吧

相关推荐

    Vue基于iview实现登录密码的显示与隐藏功能

    近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏。故有此文。 2.实现最终效果 2.1 隐藏密码   2.2 显示密码   显示密码需要点击密码框左侧眼睛 3.实现...

    html展开式菜单

    在`利用CSS+DIV制作表格.htm`中,我们可以看到另一种使用CSS和`div`元素代替传统`&lt;table&gt;`标签来创建表格的方法。这种方法更加灵活,可以轻松实现响应式布局,适用于各种屏幕尺寸。通过设置`display: table`、`...

    bootstrap制作jsp页面(根据值让table显示选中)

    在本例中,我们将看到如何通过JSP与Bootstrap结合来构建一个简单的用户配置页面。页面中包含了一个表格,表格中显示了用户的信息,如用户名称和登录名称。表格每行的最左侧设置了一个复选框,用于显示或隐藏表格的...

    HBuilder-MUI-开发文档.pdf

    在HTML结构中,`&lt;div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action"&gt;`定义了一个popover元素,包含两个`&lt;ul class="mui-table-view"&gt;`列表,分别代表不同的操作选项。当需要显示...

    学习使用bootstrap基本控件(table、form、button)

    对于内联表单(form-inline),只需将`class="form-inline"` 添加到`&lt;form&gt;` 元素中,然后将`sr-only` 类添加到`&lt;label&gt;` 元素,这样在视觉上隐藏了标签,但仍然保留了辅助技术的可访问性。 3. 按钮(Button) ...

    JAVA的Web打印方式(PageOffice、POI、jacob,html打印等)

    这种方式是最直接的,方便的,不需要加什么插件jar包,只要前台在一个div中模仿着报表的格式去设置界面布局,然后把数据动态的填充进去,再调用JavaScript打印函数,就可以实现界面的局部打印功能。如果不想让报表...

    layui实现鼠标移动到单元格上显示数据的方法

    这通常通过在一个表格中添加工具提示(tooltip)功能来实现,以达到鼠标移动到单元格上时,会有相应的提示显示出来,这能提高用户体验。 具体操作方法如下: 1. 引入Layui的JavaScript和CSS文件,确保Layui框架已...

    html使用element

    例如,一个包含选择器的表单字段: ```html 选择项"&gt; v-for="item in options" :key="item.value" :label="item.label" :value="item.value"&gt; ``` 这里,`v-model`绑定选择器的值,`options`...

    jQuery详细教程

    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...

    Struts2标签库详解.doc

    20. `&lt;s:hidden&gt;`:创建一个隐藏域,用于存储表单数据但不在页面上显示。 21. `&lt;s:i18n name=""&gt;`:加载国际化资源包,使应用支持多语言。 22. `&lt;s:include value=""&gt;`:包含其他JSP或Servlet页面,实现页面的组合...

    1+X认证Web前端开发初级模拟试题及答案7套.docx

    ### 1+X认证Web前端开发初级模拟试题解析 ...要隐藏一个元素,最简单的方法是将其`display`属性设置为`none`,这样元素不仅不会显示,而且不会占用任何空间。选项D也可以隐藏元素,但元素仍然会占用空间。

    FreeMarker页面制作规范

    宏是FreeMarker中的一个重要特性,它允许开发者创建可重用的代码片段,这些代码片段可以像自定义指令一样在模板中被调用。宏可以包含任意的模板内容,包括变量、循环、条件判断等,这极大地增强了模板语言的功能性和...

    html习题(答案).docx编程资料

    在一个框架的属性面板中,不能设置下面哪一项。** - **答案:** A.源文件 - **解析:** 框架(frame)的属性面板主要用于设置框架的一些基本属性,如边框颜色、边框宽度和滚动条等。而“源文件”通常是指框架内部...

    javascript 下拉式导航菜单 收集的资料

    在网页设计与开发中,导航菜单是不可或缺的元素之一,它不仅提升了用户体验,还使网站结构更加清晰。本文将深入解析如何使用JavaScript和CSS构建一个酷炫的下拉式导航菜单。 #### 一、CSS样式设置 在创建下拉式...

    jqgrid 3.5 beta

    jqGrid 是一个强大的、开源的 jQuery 插件,专为在 Web 应用程序中展示和操作数据网格而设计。3.5 Beta 版本是该插件的一个重要里程碑,它在功能和性能上进行了优化,以适应不断发展的 Web 开发需求。 ### 1. 支持 ...

    jQuery表格插件带分页控制代码.zip

    在这个“jQuery表格插件带分页控制代码.zip”压缩包中,我们聚焦于一个特定的应用场景:使用jQuery来实现带有分页功能的数据表格。这种技术在网页应用中非常常见,尤其在展示大量数据时,可以提高用户体验并优化页面...

    大学生简单静态HTML网页模板源码——家乡介绍美丽乡村11页

    例如,在这个项目中,`&lt;link rel="stylesheet" type="text/css" href="css/2018.css"&gt;` 表示链接了一个外部 CSS 文件,其中包含了对网页样式的定义。 - **DIV+CSS布局**:通过 DIV 容器结合 CSS 来实现网页的布局。...

    Vue实现浏览器打印功能的代码

    这个场景中,我们使用了一个名为`vue-easy-print`的插件,它简化了在Vue项目中调用本地打印机的过程。以下是实现这一功能的具体步骤和相关知识点: 1. **安装插件**: 首先,你需要通过npm或yarn安装`vue-easy-...

    启航机电设备企业建站CMS系统 v15.9

    对模板引擎进行大的优化,去除table分行效果,改用(ul+li或div+div) 修正模板引擎的工作流程,加入对IF语句支持   测试地址:http://www.tb11.net/system/xitong 管理地址:admin/login.asp 后台帐号:admin...

    CSS通用样式基本文档

    通过以上分析可以看出,这套CSS通用样式集合覆盖了前端开发中常见的布局需求,如全局样式设置、文档结构样式、输入控件样式、列表样式、图片样式、链接样式、文本对齐方式以及其他常用样式。这些样式不仅能够帮助...

Global site tag (gtag.js) - Google Analytics