- 浏览: 1025850 次
- 性别:
- 来自: 天津
文章分类
- 全部博客 (445)
- Java (22)
- J2EE (18)
- Flex (102)
- Flex-blazeds (1)
- Flex-FABridge (2)
- Flex4 (3)
- CheckStyle (2)
- PowerDesigner (0)
- POI (2)
- Java2Word (2)
- 杂项 (15)
- 日记 (3)
- 数据库-oracle (41)
- 数据库-SQLServer (7)
- 中间件 (1)
- 英语 (8)
- C# (43)
- ASP.net (72)
- ASP.net MVC (28)
- 微软-Entity Framework (19)
- JavaScript (22)
- JQuery (31)
- EasyUI (3)
- VS2010 (4)
- CVS (1)
- Tomcat (3)
- Linux (1)
- 遗留问题 (1)
- iphone (1)
- MAC (0)
- 系统 (2)
- Web Service (4)
- Cache Manager (1)
- PMP (1)
- WCF (10)
- BootstrapJs (1)
- Web API (6)
- Go语言 (0)
- 网络协议 (2)
- Redis (10)
- RabbitMQ (10)
- Git (3)
- Kafka (5)
- ELK (5)
- Nginx (3)
- 测试 (2)
最新评论
-
ygm0720:
Table行拖拽自己实现 -
程乐平:
Flex4开发视频教程(27集)下载http://bbs.it ...
Flex4教程 -
liuweihug:
Jquery+asp.net 后台数据传到前台js进行解析的办 ...
AJAX $.toJSON的用法或把数组转换成json类型 -
weilikk:
谢谢谢谢!!
javascript IE下不能用 trim函数解决方法 -
gxz1989611:
vigiles 写道请问楼主:[Fault] exceptio ...
blazeds推送技术至Flex
网上有很多,这里介绍三种:
第一种方法 ,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下:
<table> <tr> <td> 这行不隐藏</td> </tr> <tr id="tr_1"><td> 这行要隐藏</td> </tr> <tr id="tr_2"><td> 这行要隐藏</td> </tr> ... </table>
那么控制显隐可以直接使用
for( var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $("#tr_"+i).hide(); }
第二种方法 ,是使用$.each(),这个方法需要设置table的id,如下:
<table id="Tbl"> <tr> <td> 这行不隐藏</td> </tr> <tr> <td> 这行要隐藏</td> </tr> <tr> <td> 这行要隐藏</td> </tr> ... </table>
那么控制显隐可以直接使用
$.each($("#Tbl tr"), function(i){ if(i > 0){ this .style.display = 'none'; } });
第三种方法 ,是通过属性筛选器,这个方法需要给tr加上某个特定属性,比如class,如下:
<table id="Tbl"> <tr> <td> 这行不隐藏</td> </tr> <tr> <td class="hid">这行要隐藏</td> </tr> <tr> <td class="hid">这行要隐藏</td> </tr> ... </table>
那么控制显隐可以直接使用
var trs = $("tr[class='hid']"); for( i = 0; i < trs.length; i++){ trs[i].style.display = "none"; //这里获取的trs[i]是DOM对象而不是jQuery对象,因此不能直接使用hide()方法 }
就这么简单。如果是要显示的话,把相应的方法改成show()或者display属性改为”"即可
实际应用:
说明:默认情况下,只显示“对应页面名称”所在行,当点击单选按钮时,显示不同的行。
<tr> <td class="tr_title_edit"><label for="f_navname">对应页面链接<font color="red">*</font></label></td> <td class="tr_content_edit"><input type="radio" id="f_inner" name="f_navState" value="1" checked="checked" /><label for="f_inner">内部链接</label><input type="radio" id="f_outer" name="f_navState" value="2" /><label for="f_outer">外部链接</label></td> </tr> <tr id="il" style="display:block"><td class="tr_title_edit"><label for="f_pagename">对应页面名称</label></td> <td class="tr_content_edit"><select name='f_pageid' id="f_pageid"> <option value=""></option> <option value="">新闻</option> <option value="">通知</option></select></td> </tr> <tr id="ol" style="display:none"><td class="tr_title_edit"><label for="f_navname">外部链接</label></td> <td class="tr_content_edit"><input type="text" class="inputLine" size="40" id="f_outsidelink" name="f_outsidelink" /></td> </tr>
通过id控制隐藏和显示如下:
$("input[name='f_navState']").click(function(){ //if($("input[name='f_navState']").attr("checked")==true ){ $("input[name='f_navState']").each(function(i){ if(this .checked){ var f_navState = $("input[name='f_navState']")[i].value; //获得单选框的值 if(f_navState==1){ //alert(123); $("#il").show();$("#ol").hide(); }else { //alert(456); $("#ol").show();$("#il").hide(); } } }); //} });
发表评论
-
js插件库系列导航
2016-06-02 13:41 595此系列为了建立一个有用的js插件和解决方案库,希望对您有 ... -
js Tree - 树形菜单插件
2016-06-02 13:41 1353js Tree - 树形菜单 ... -
easyui input 取值 赋值
2016-05-13 15:49 958$("#userdlg_useraccount& ... -
Jquery easyUI dialog的close和destroy
2016-05-13 15:48 4443之前在用easyUI的时候遇到一个问题,一直困扰着我。 ... -
jquery-validation 使用
2012-11-06 10:19 5760一、用前必备 官方 ... -
jQuery blockUI插件在ajax提交的时候的用法(block不起作用)
2012-10-23 10:36 5742在开发过程中出现一个问题,就是在IE7,8,9 ,Chrome ... -
AJAX $.toJSON的用法或把数组转换成json类型
2012-09-27 15:35 202741. html页面全部代码 <html> ... -
JQuery dialog弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
2012-09-07 16:55 5531搜索相关问题发现,其中主要问题是出在:JQuery会把Dial ... -
jquery dialog 详解
2012-09-07 16:49 12347还是先看例子吧。另外如果要拖动、改变dialog的大小的话 ... -
jquery操作dropdownlist和radiobuttonlist
2012-08-13 19:08 3073jquery获取ASP.NET服务器端控件dropdownli ... -
JS中showModalDialog 详细使用
2012-04-11 16:51 1199基本介绍: ... -
Window_Open详解
2012-04-11 16:51 982一、window.open()支持环境: Jav ... -
DIV中的image控件,放大,缩小,还原,拖拽
2012-02-10 11:21 5311<!DOCTYPE html PUBLIC " ... -
控制 iframe 内图片放大缩小
2012-02-09 09:09 4172index.asp 页面 <html> & ... -
Jquery框架
2011-11-15 15:52 14431. DWZ 官方网址:http://code. ... -
MVC 分页 JQuery Pager
2011-11-07 13:00 3213导入的包 <script type=" ... -
Jquery与.net MVC结合,通过Ajax
2011-10-14 09:55 2649在工作中做了这么一个东西。 Html端: @using T ... -
jQuery插件ASP.NET应用之AjaxUpload
2011-10-14 09:49 2368本次使用AJAXUPLOAD做为上传客户端无刷上传插件,其最新 ... -
Radio Button and CheckBox在FireFox中刷新自动改变选中项
2011-08-29 12:54 2797今天开发过程中出现了这样一个问题,我选中radio butto ... -
jQuery Supertextarea Plugin
2011-08-18 11:46 1288http://truthanduntruth.com/deve ...
相关推荐
在本文中,我们将深入探讨使用jQuery来控制TR显示隐藏的几种方法。 首先,最常见的方法是通过ID来控制。这种方法适用于在HTML生成时为每个需要控制的TR元素分配唯一的ID。例如: ```html <tr id="tr_1">这行不隐藏...
本文将介绍三种使用jQuery实现tr显示与隐藏的常用方法。 ### 第一种方法:使用id 通过为tr元素设置一个唯一的id,并使用jQuery的选择器和隐藏(hide)方法来控制该行的显示与隐藏是最为简单直接的方式。在HTML中,...
在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的操作,包括隐藏和显示元素。本文将深入探讨如何利用 jQuery 实现表格行的隐藏与显示功能,同时也会涉及到一些基本的 HTML 和 ...
在这个主题“jquery 隐藏与显示tr标签示例代码”中,我们将探讨如何使用jQuery库来控制HTML表格行(tr标签)的显示与隐藏。这种方法在网页设计中非常实用,尤其是在需要根据用户交互来动态改变网页内容时。接下来,...
2. **DOM操作**:在回调函数中,我们可以通过jQuery选择器找到对应的子行(`<tr>`),然后使用`.slideToggle()`方法实现平滑的展开和隐藏动画。`slideToggle()`会根据当前元素的CSS `display`属性切换其可见性,同时...
在"jquery treetable完美实现,可无限增加层级,可全打开全隐藏"的场景下,我们将深入探讨如何利用这个库来构建功能丰富的树形表格。 1. **安装与引入** 首先,确保你已经在项目中引入了jQuery库。接着,通过CDN或...
本文将深入探讨如何使用JavaScript控制表格行(TR)的显示和隐藏。 首先,我们需要了解HTML中的`<tr>`元素。`<tr>`元素用于定义表格中的行,它可以包含多个`<td>`(表格数据)或`<th>`(表头)元素。在JavaScript中...
在网页开发中,经常需要对表格(table)的行(tr)进行隐藏和显示操作,以便根据用户交互或特定条件动态地控制界面内容。本文将深入探讨如何利用JavaScript和CSS来实现这一功能。 首先,`<tr>`元素是HTML表格中的行...
通过CSS我们可以控制表格的样式,而通过JavaScript或jQuery,我们可以增加交互性,如展开和合并单元格。 实现表格展开和合并的关键在于监听用户的交互事件,例如点击特定的单元格或按钮。在jQuery中,可以使用`....
当表格列的宽度减小到一定程度时,可能无法完全显示所有内容,这时我们可以使用CSS的`overflow`属性来控制内容的溢出。例如,设置`overflow: hidden;`可以使超出列宽的内容不可见。 为了在宽度达到特定阈值时自动...
4. **隐藏和显示表格**:要隐藏表格,可以使用`$("table").hide()`,反之,使用`$("table").show()`可使其显示。还可以控制动画效果,如`$("table").fadeIn()`和`$("table").fadeOut()`。 5. **事件处理**:jQuery...
6. **隐藏与显示**:使用`$("#divObj").show()`和`$("#divObj").hide()`来控制层的显示与隐藏。`$("#tab tr td").click(function (event) {})`绑定了表格单元格的点击事件,将选中的td内容赋值给id为`aaa`的输入框。...
这个函数通常会改变行的样式,比如添加或移除一个“展开”类,这将通过CSS控制显示或隐藏嵌套的内容。 例如,可以使用以下jQuery代码: ```javascript $(document).ready(function() { $('table tbody tr').click...
分享下jQuery如何隐藏和显示 input 默认值的例子。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <... <...
本文将详细讲解如何使用jQuery实现这样的功能,即点击表格的某一行,其下方的相关行会展开显示,再次点击则折叠隐藏。 首先,jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务...
要控制行的显示或隐藏,我们可以使用jQuery对<tr>元素应用样式控制,比如通过设置display属性为none使其不可见,或者设置为block使其可见。 示例函数`loadChargeItemsSelect`接收一个参数`status`,该参数表明了...
JavaScript作为一种强大的客户端脚本语言,能够实现在网页中动态控制表格的显示和隐藏,为用户提供更丰富的交互体验。本知识点主要探讨如何使用JavaScript来实现这一功能。 首先,我们需要了解HTML中的表格元素。一...