`
pipe
  • 浏览: 206640 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery入门之动态隐藏显示列

阅读更多
首先 去下载一个jquery.js.
其他看代码吧:
<body>

<script language="javascript" src="./script/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
			$("td:eq(2)",$("tr")).hide();
			$("td:eq(3)",$("tr")).hide();
			$("td:eq(4)",$("tr")).hide();
			$("#button1").click(function(){
	 				$("td:eq(2)",$("tr")).toggle(1000);	//设置为0表示不用动画 ,1000就1秒的时间来展示或者隐藏
	 				$("td:eq(3)",$("tr")).toggle(1000);	
	 				$("td:eq(4)",$("tr")).toggle(1000);	
				 });	
	});
	
	
</script>
<input type="button" id="button1" value="隐藏/显示后三列"/>

<table id="mytable"  border="1"  cellpadding="0"
	cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">
	<tr >
		<td width="200">第一列</td>
		<td  width="200">第二列</td>
		<td  width="200">第三列</td>
		<td  width="200">第四列</td>
		<td  width="200">第五列</td>
	</tr>

	<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
	
	<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
	
	<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
	
	<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
	
	<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
</table>


</body>



首先是页面一进来就隐藏后面三列, 通过点击按钮,来控制后三列的隐藏与显示。
$("td:eq(2)",$("tr")).toggle(0); 表示所有的tr中 第3个td隐藏
分享到:
评论

相关推荐

    JQuery学习资料

    其次,`jquery入门教程`通常会涵盖JQuery的基本用法,包括快速入门、选择器、DOM操作、事件处理、效果和动画、插件使用等内容。对于初学者来说,这是了解和上手JQuery的关键。在这一部分,你可能会学习到如`....

    Jquery帮助文档和JQuery的js文件

    例如,`$("#element").hide().fadeIn(1000)`会先隐藏元素,然后在1秒内淡入显示。 3. **DOM操作(DOM Manipulation)**:jQuery提供了一系列方法来操作DOM,如`append()`用于在元素内部追加内容,`remove()`用于...

    jQuery 1.4 Animation Techniques

    《jQuery 1.4 动画技术》是一本入门指南,帮助读者快速掌握jQuery的所有动画方法,并构建一套现成可用的动画工具箱。以下是本书的重点内容: - **动画方法详解**:书中详细介绍了jQuery 1.4版本中提供的15种动画...

    bootstrap入门教程

    - 可以通过添加`.visible-*`和`.hidden-*`类来自定义元素在不同屏幕尺寸下的显示与隐藏。 **2. 组件 (Components)** - Bootstrap提供了一系列预定义的UI组件,如按钮、表单、导航栏等,方便开发者快速构建功能...

    jquery-lab:jQuery实验练习的入门文件

    比如,你可能看到一个简单的页面,其中包含一个按钮,当你点击按钮时,会触发一个jQuery事件,这个事件可能包括改变某个元素的样式、显示隐藏的元素或者进行Ajax请求。 为了深入学习,你可以尝试修改这些练习,看看...

    [Learning.jQuery(4th,2013.6)].Jonathan.Chaffer.文字版

    - **第二章:选择器与基本操作**:详细讲解了 jQuery 中的选择器语法,以及如何使用这些选择器来选取 DOM 元素并进行基本的操作,如隐藏、显示元素等。 - **第三章:事件处理**:介绍了如何使用 jQuery 来绑定事件...

    Bootstrap从入门到项目实战.zip

    例如,Collapse插件可用于隐藏和显示内容,常用于实现详情/摘要切换效果。 项目实战部分将引导你如何将所学应用于实际项目,可能是构建一个响应式的网站模板、一个具有复杂交互功能的单页应用或者是其他类型的Web...

    APEX5入门操作手册_V1.0.doc

    - 在页面设计器中,可以更改列属性,例如将部门列的SQL查询替换为显示部门名称的查询,如:`SELECT E.EMPNO, E.ENAME, E.JOB, E.HIREDATE, E.SAL, E.COMM, E.DEPTNO, D.DNAME FROM EMP E, DEPT D WHERE ...`。...

    前端学习详细计划表

    * JQuery效果:隐藏显示、淡入淡出、滑动、动画 * JQuery html捕获、设置、添加删除元素、jQueryCSS类 * JQuery遍历:遍历祖先、后代、同胞、过滤遍历 * JQuery Ajax方法:load()方法、get()/post()方法 Html5&CSS3...

    Highcharts入门之基本属性

    以上就是Highcharts入门之基本属性的全部内容,希望对大家学习如何使用Highcharts有所帮助。Highcharts作为一个功能强大的图表库,在实际开发中具有广泛的应用。通过掌握这些基本属性和使用方法,开发者可以快速创建...

    aTable:基于 Backbone.js 构建的快速、灵活的 Javascript 表格组件

    直观的 API - 以编程方式与表格交互以调整大小、移动、隐藏和显示列,以及过滤和排序表格。 ####依赖 jQuery 主干.js 下划线.js ####Get started 运行以下命令以获取 aTable 源并构建库: git clone ...

    Flexigrid的使用(整合Struts2 )

    它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 本资源为Flexigrid的入门使用 博文地址:...

    前端项目-datatable.zip

    - **自定义列显示**:允许开发者根据需求选择显示或隐藏表格的特定列。 - **扩展性**:DataTable有丰富的API和可扩展的插件系统,可以与其他库(如Bootstrap)集成,实现更复杂的定制功能。 3. **文件结构**: ...

    浅试Bootstarp项目202206.zip

    3. 探索JavaScript:研究如何通过JavaScript插件增强交互性,如模态框的显示和隐藏。 4. 实践响应式设计:观察不同屏幕尺寸下的布局变化,学习如何利用媒体查询(Media Queries)进行响应式调整。 5. 自定义...

    bootstrap帮助文档chm文件.zip

    4. **响应式工具**:如隐藏或显示特定设备上的内容(Hidden/Visible Classes),以及响应式图像(Responsive Images)等,这些都是为了确保在不同设备上提供良好的用户体验。 接下来是“Bootstrap3.3.7菜鸟教程.chm...

    bootstrap.rar

    7. **辅助类**:Bootstrap还包括一系列辅助类,用于快速实现常见的布局和样式需求,如对齐(alignments)、隐藏或显示元素、间距类等。 8. **文档**:压缩包中的文档部分将详细介绍如何使用Bootstrap,包括安装指南、...

    bootstrap中文文档

    7. **响应式工具**:Bootstrap的响应式工具类可以帮助开发者控制元素在不同屏幕尺寸下的显示方式,如隐藏或显示特定的元素。 8. **JavaScript插件**:Bootstrap内建了一些基于jQuery的插件,如滚动spy、模态框、...

Global site tag (gtag.js) - Google Analytics