`
编程足球
  • 浏览: 257101 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

隐藏显示 div + tr 无法正常工作解决方法

 
阅读更多
想同时控制一个table中的几行(及tr标签)
发现使用div + tr 时候,没法隐藏。
<div style='display:none' id="advancedQueryDiv" name="advancedQueryDiv">
	<tr>
	    <td>查询1:</td>
		<td colspan=4>
		   <input type="text" name="keyword" value="" size=50>	
        </td>
	</tr>
	<tr>
		<td>查询2:</td>
		<td colspan=4>
			<input type="text" name="keyword" value="" size=50>	
        </td>
	</tr>
</div>


发现没有预想的结果,上网查询后发现可以通过tbody来解决
<tbody style='display:none' id="advancedQueryDiv" name="advancedQueryDiv">
	<tr>
	    <td>查询1:</td>
		<td colspan=4>
		   <input type="text" name="keyword" value="" size=50>	
        </td>
	</tr>
	<tr>
		<td>查询2:</td>
		<td colspan=4>
			<input type="text" name="keyword" value="" size=50>	
        </td>
	</tr>
</tbody>


js脚本不变

	function advancedQueryBtn(btn){
		var display = document.getElementById("advancedQueryDiv").style.display;
		if(display == ""){
			btn.value = '展开高级查询'
			document.getElementById("advancedQueryDiv").style.display = "none";
		}else{
			btn.value = '关闭高级查询'
			document.getElementById("advancedQueryDiv").style.display = "";
		}
	}
分享到:
评论

相关推荐

    div+css技巧

    - **表格标签的使用**:在使用`&lt;table&gt;`标签时,需要注意其各种属性的正确设置,以确保表格的正常显示。 - 示例代码: ```html &lt;tr&gt; 内容 &lt;/tr&gt; ``` - **脚本标签的language属性**:在HTML中,`&lt;script&gt;`...

    DIV+CSS设计时IE6、IE7、FF 与兼容性有关的特性

    在网页设计中,`DIV+CSS`是一种常用的技术,它能够实现页面的结构与样式分离,提高...这些技巧和方法能够帮助开发者在面对不同浏览器的CSS兼容性问题时,更好地进行代码优化和调试,确保网页在各种环境下都能正常显示。

    JavaScript Table行定位效果

    首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;tr style=...

    bootstrap table列和表头对不齐的解决方法

    在实际项目中,可能需要根据表格的具体结构和需求进行微调,但上述方法提供了一个通用的解决方案。确保正确引用了Bootstrap Table的CSS和JS文件,并且表格的HTML结构符合Bootstrap Table的要求,这样才能正常工作。...

    css之自动换行.pdf

    此外,若在`td`或`th`中嵌套`div`或`p`等元素,可以应用之前针对Firefox的解决方案来处理换行问题。 总的来说,CSS中的自动换行涉及到`white-space`、`word-wrap`和`word-break`等属性,以及特定浏览器的兼容性处理...

    html中使用margin:0 auto整个页面不居中的解决方法

    添加了正确的DOCTYPE后,浏览器将不再处于Quirks模式,而是进入“Standards模式”,此时`margin: 0 auto`就应该能够正常工作,使元素居中显示。需要注意的是,这种方法仅适用于块级元素,如`&lt;div&gt;`、`&lt;p&gt;`等,对于...

    IE7,6与Fireofx的兼容性处理方法

    `和`line-height`可以解决元素的垂直居中问题,但要注意这种方法可能导致内容无法换行。 4. **margin加倍问题**:在设置浮动的div时,IE6会将margin加倍。通过添加`display: inline;`可以修复此问题,例如`#...

    jQuery实现Table分页跳转

    - 注意兼容性问题,确保在主流浏览器中正常工作。 通过以上步骤,我们可以使用jQuery实现Table的分页跳转,提供流畅的用户体验。随着前端技术的发展,现在还有许多现代化的框架和库(如React、Vue、Angular)提供了...

    IOS中手风琴表不能移动的解决方法

    确保`&lt;tr&gt;`和`&lt;td&gt;`元素的`display`属性设置正确,特别是对于隐藏和显示的行。例如,`display:none`和`display:block`可能需要特别调整以适应iOS的Webkit渲染引擎。 3. **jQuery和Accordion插件**: 如果你使用的...

    bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

    2. 修改模态框的显示和隐藏选项,如`$(“#myModal”).modal({show : true})`或`$(“#myModal”).modal({backdrop:false, show : true})`,但这些并未解决问题。 3. 检查HTML结构的变化,发现页面跳转后多了一个`div`...

    第16章 CSS盒模型[下].pdf

    这样设置后,即使上面的元素浮动,当前元素也不会被覆盖,而是正常显示在浮动元素的下方。 在文档的最后提到,本次课程是由北风网和瓢城Web俱乐部联合提供的,并由李炎恢老师主讲,感谢收看本次教程,并期望观众能...

    关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)

    除了 Bootstrap Modal 本身的问题外,另一个常见的问题是 Bootstrap Datepicker 在 Modal 内部无法正常显示。这是因为 Datepicker 的弹出层可能被 Modal 的背景遮挡。为解决这一问题,我们可以将 Datepicker 的...

    前端面试题汇总

    - **解决方法**: 使用条件注释或特定浏览器的CSS Hack。 **44. display属性** - **值**: `block`, `inline`, `inline-block`, `flex`, `grid`等。 - **作用**: 控制元素的显示方式和布局。 **45. absolute定位与...

    CSS 之强制换行技巧

    这段代码可以实现将连续的字符在200像素宽度的容器内正常换行显示。 而在Firefox浏览器中,除了`white-space`和`word-break`属性外,还需要添加`overflow:hidden;`来隐藏超出容器边界的内容,或者使用`overflow:...

    用JQuery 实现的自定义对话框

    这里,我们创建一个隐藏的`&lt;div&gt;`元素,其中包含对话框的具体文本和按钮: ```html &lt;div id="test2" style="display:none"&gt; &lt;tr&gt; &lt;td&gt;JQuery模式对话框插件好用吗? &lt;/tr&gt; &lt;tr&gt; ()" type="button" value=...

    CSS3秘笈 第3版 戴维·索耶·麦克法兰著 完整版PDF

    - **隐藏内容**:可以通过CSS隐藏某些只适用于屏幕显示的内容。 以上是《CSS3秘笈》一书中提到的关键知识点概述。本书不仅深入浅出地介绍了这些技术的基本用法,还提供了大量的示例代码和实践案例,帮助读者更好地...

    css入门笔记

    2.hidden 隐藏的,溢出的内容全部隐藏,不可见溢出 3.scroll 显示滚动条,溢出时可用 4.auto 自动,溢出时自动显示滚动条并且可用 ============================== 9.29 1、边框线 属性:border: 取值: 2、...

    html和css基础

    为了确保网站能在不同浏览器中正常显示,需要进行兼容性测试。 1. **兼容性测试**: - 测试浏览器: Internet Explorer 6.0, Firefox 3.0 - 目标: 页面表现在这两个浏览器中保持一致,无错位、重叠现象。 2. **...

    css滤镜基础教程

    CSS滤镜基础教程 ...随着技术的不断发展,设计师们已经不再...然而,由于浏览器兼容性问题,开发者在实际应用中还需要考虑使用CSS前缀、polyfill库或者使用现代CSS标准替代方法,确保滤镜效果在各浏览器中的正常展示。

Global site tag (gtag.js) - Google Analytics