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实现可编辑的表格

  • 2010-06-05 19:25
  • 30KB
  • 下载

用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

下面是js Code:  复制代码 代码如下: $(function() { // 相当于在页面中的body标签加上onload事件  $(".caname").click(functi...

JQUERY实现可编辑的表格

  • 2012-01-08 23:03
  • 473KB
  • 下载

jquery实现动态生成表格

  • 2013-11-13 11:28
  • 787B
  • 下载

jquery实现表格的多行删除

初学jquery,发现自己比较脑残的一味百度,找到一些代码,就想着运行,出现问题不知道怎么解决。 下面介绍如何运用jquery实现表格的多行删除 首先如果你没有jquery类库,要先下载jquer...

jquery实现表格分页

  • 2017-03-04 14:21
  • 1.44MB
  • 下载

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

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

Jquery实现可编辑的表格

  • 2009-07-30 17:23
  • 31KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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