jquery实现表格的收缩

原创 2012年03月26日 20:27:15

<!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 language="javascript" type="text/ecmascript"  src="../include/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function (){
 //先找到所有的class=parent的tr
 $('tr.parent').click(function (){
  //所有的
  $(this).siblings('.child-'+this.id).toggle();
  });
     //初始化隐藏掉属性带child的
  $('tr[class^=child]').toggle();
 });
</script>
</head>

<body>
<table width="500" border="1">
  <tr>
    <td>id</td>
    <td>name</td>
    <td>total</td>
  </tr>
  <tr class="parent" id="row1">
    <td><span>关闭</span></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
    <tr class="child-row1">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr class="child-row1">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="parent" id="row2">
    <td><span>关闭</span></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr class="child-row2">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
    <tr class="child-row2">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="parent" id="row3">
    <td><span>关闭</span></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="child-row3">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr class="child-row3">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

JQUERY实现可编辑的表格

  • 2012年01月08日 23:03
  • 473KB
  • 下载

使用jQuery实现页面表格中相同内容的行或列合并

网上找到的jQuery方法: //函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格 //参数说明:_w_table...

jquery实现动态生成表格

  • 2013年11月13日 11:28
  • 787B
  • 下载

网页表格冻结示例,jquery实现

  • 2010年03月29日 22:08
  • 29KB
  • 下载

jquery实现表格拖拽排序

最开始使用时,我是参考这篇文章:  http://www.oschina.net/code/snippet_203508_7090  可以点击“全屏查看所有代码”,可以看得更清楚。 1、引入...
  • nhf_a
  • nhf_a
  • 2017年12月08日 09:19
  • 6

jquery实现表格本地排序

  • 2013年05月31日 16:48
  • 9KB
  • 下载

JQuery实现可编辑的表格.rar

  • 2009年08月27日 09:50
  • 30KB
  • 下载

用JQuery实现表格隔行换颜色

最近在学习Jquery,其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的,相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种:     方法一:使用CSS样式,定义两个类的样式,分别使用到...

Jquery实现可编辑的表格

  • 2009年07月30日 17:23
  • 31KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现表格的收缩
举报原因:
原因补充:

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