jquery实现表格弹出隐藏

原创 2012年03月26日 19:19:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	$("tr.parent").click(function(){
		$(this).siblings(".child-"+this.id).toggle();
		});
	$("tr[class^=child]").toggle();
	
	});
</script>
</head>
<body>
<table width="300" border="1">
  <tr>
    <th>ID</th>
    <th>name</th>
    <th>total</th>
  </tr>
  <tr id="row1" class="parent">
    <td><span>关闭1</span></td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="child-row1">
   
    <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
  </tr>
  <tr class="parent" id="row2">
  
    <td><span>关闭2</span></td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="child-row2">
    <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
  </tr>
  <tr class="parent" id="row3">
    <td><span>关闭3</span></td>
    <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
  </tr>
  <tr class="child-row3">   
   <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
  </tr>
  <tr class="child-row3">
    <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
    <td>我们是被弹出来的</td>
  </tr>
</table>

</body>
</html>
效果图
当点击关闭时就会隐藏“我们是被弹出来的” 


js控制隐藏或显示table的某一行

主要JS如下:(兼容browser: IE9, FireFox, Chrome, 360 safe) var row = document.getElementById(ro...
  • keenweiwei
  • keenweiwei
  • 2013年02月18日 11:13
  • 17158

html表格嵌套表格隐藏与显示 跨行显示

jsp页面 /js/jquery-1.6.4.min.js" type="text/javascript" > /skin/color1/images/company/fav...
  • yongzhian
  • yongzhian
  • 2014年08月18日 14:10
  • 1366

Jquery隐藏/显示表格内容

点击展开详细信息按钮,显示/隐藏该条数据详细信息,下面是源代码,仅供参考! .panel { background-color:green; ...
  • u014655105
  • u014655105
  • 2015年04月15日 12:39
  • 1536

html表格 <td> 文字过多需要隐藏的正确方法

表格中文字过多需要隐藏文字 正确的做法 一.强制文字不换行,并隐藏多余部分 CSS 代码 div{width:100px;overflow:hidden;white-spa...
  • h330531987
  • h330531987
  • 2017年05月04日 23:03
  • 1679

表格中单元格之间分隔线的隐藏方法

表格中单元格之间分隔线的隐藏方法 第 一 行 第 二 行 第 三 行 这个表格去掉了单元格之间的纵向分隔线 ...
  • kunkun378263
  • kunkun378263
  • 2014年09月12日 11:17
  • 1304

如何监听软键盘的弹出、隐藏(亲测可用)

看了N多文章,终于找到了答案第一步这篇文章解决了在不是全屏模式下,监听软键盘弹出隐藏,但是在全屏模式下,无效 注意:必须设置 android:windowSoftInputMode="adj...
  • Android_Study_OK
  • Android_Study_OK
  • 2016年09月24日 00:55
  • 4596

JQuery_利用JQuery实现对表格中的部分列实现隐藏

我们经常看到如下的页面,页面中有很多的数据项。我们可能只关注某些项,这时候我们就需要部分列显示的效果了。 部分显示与隐藏的设计思路: 1. 对tr的每一项中都放置一个 并设置一个相同的na...
  • u010003835
  • u010003835
  • 2016年03月04日 20:57
  • 2791

使用jquery实现点击按钮弹出层和点击空白处隐藏层

使用jquery弹出层和点击空白处隐藏层 $(function () { $('#btnShow').click(f...
  • bianjing40
  • bianjing40
  • 2015年10月25日 01:15
  • 2847

七、UI-Grid 隐藏的表格

原文:108 Hidden Grids 隐藏的表格当UI-Grid在加载页面的时候不是可见状态,比如在tabset页面中,或者是在可折叠的页面内。最终的结果往往是一个表格,呈现出“错误”或者行列出现...
  • vesong87
  • vesong87
  • 2017年03月31日 11:53
  • 1253

”Dialog中包含EditText“时,控制输入法的”隐藏/自动弹出“操作

实战情景需求: 需要在EditText聚焦时自动弹出输入法,或者隐藏输入法。内容描述: 1.输入法弹出,一般没什么问题。但是有没发自动弹出的情况如:弹出的对话框Dialog里有edittext。 解...
  • nzfxx
  • nzfxx
  • 2016年10月15日 14:56
  • 2795
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现表格弹出隐藏
举报原因:
原因补充:

(最多只允许输入30个字)