jQuery实现表格展开与折叠的方法_jquery
本文实例讲述了jQuery实现表格展开与折叠的方法。分享给大家供大家参考。具体分析如下：
这是很人性化的一款特效代码，实现点击其中一个父级，另一个之前打开的父级会自动关闭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery表格展开折叠，默认折叠</title>
<style>
table{ border:0;border-collapse:collapse;}
td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th{ font:bold 12px/17px Arial;text-align:left;
padding:4px;border-bottom:1px solid #333;
width:100px;
}
.parent { background:#FFF38F;cursor:pointer;} /* 偶数行样式*/
.odd{ background:#FFFFEE;} /* 奇数行样式*/
.selected{ background:#FF6500;color:#fff;}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
$(".parent").click(function(){
$(this).toggleClass("selected");
$(this).siblings().not(".parent").not(":first-child").hide();
$(this).next().show().next().show();
});
})
</script>
</head>
<body>
<table>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
<tr class="parent" id="row_01">
<td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</table>
</body>
</html>希望本文所述对大家的jQuery程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PPT表格中插入的图片调整格式的操作步骤
Mar 26, 2024 pm 04:16 PM
1、新建一个PPT文件，命名为【PPT技巧】，作为示例。2、双击【PPT技巧】，打开PPT文件。3、插入两行两列的表格，作为示例。4、在表格的边框上双击，上方工具栏出现【设计】的选项。5、点击【底纹】的选项，点击【图片】。6、点击【图片】，弹出以图片为背景的填充选项对话框。7、在目录中找到要插入的托，点击确定即可插入图片。8、在表格框上右击，弹出设置的对话框。9、点击【设置单元格格式】，勾选【将图片平铺为底纹】。10、设置【居中】【镜像】等自己需要的功能，点击确定即可。注意：默认为图片填充在表格
关于销量预测如何制作表格
Mar 20, 2024 pm 03:06 PM
能够熟练的制作表格不仅是会计、人事以及财务的必备技能，对于很多销售人员来说，学会制作表格也是很重要的。因为与销量有关的数据都是很多并且很复杂的，而且不是简单的记在文档当中，就可以说明问题的。为了能够让更多的销售人员熟练运用Excel来制作表格，小编接下来要介绍的就是有关于销量预测的表格制作问题，有需要的朋友不要错过哦！1，打开【销量预测及目标制定】，xlsm，来分析每个表格所存放的数据。2，新建【空白工作表】，选择【单元格】，输入【标签信息】。向下【拖拽】，【填充】月份。输入【其它】数据，点击【
wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤
Mar 27, 2024 pm 07:30 PM
1、打开工作表，找到【开始】-【条件格式】按钮。2、点击列选择，选中将添加条件格式的列。3、单击【条件格式】按钮，弹出选项菜单国。4、选择【突出显示条件规则】-【介于】。5、填写规则：20，24，深填充色深绿色文本。6、确定后，所选列中数据按照设定对相应数字文字、单元框加色处理。7、对于没有冲突的条件规则，可以重复添加，但对于冲突规则wps则会以最后添加的规则代替之前建立的条件规则。8、重复添加【介于】规则20-24和【小于】20后的单元列。9、如需改变规则，刚可以清除规则后重新设定规则。
谷歌 Pixel 9 Pro Fold 手机壳曝光：外屏 6.4 英寸、内屏 8.02 英寸
Jun 25, 2024 pm 02:35 PM
6月25日消息，消息源ytechb昨日（6月24日）发布博文，分享了谷歌Pixel9ProFold手机壳渲染图，再次展示了这款折叠屏背面的设计。此前消息，谷歌将于今年10月发布Pixel9系列手机，除了Pixel9系列三款手机之外，PixelFold也纳入到Pixel9系列中，正式上架后名称为Pixel9ProFold。本次曝光的手机壳来自配件厂商Torro，该公司的英国和美国在线商店已经列出了该产品手机壳，并披露了这款手机的设计和显示屏尺寸。页面中展示了大量Pixel9ProFold手机壳渲染
折叠屏手机最大短板：没有核心应用场景
Mar 16, 2024 am 09:04 AM
我们今天探讨的并非某一款产品到底怎么样，而是回归到“折叠屏”话题本身上来，探究一下折叠屏手机的“合理性”。首先还是看一看折叠屏手机的市场表现，根据IDC最新数据报告显示，2023年全年中国折叠屏手机市场出货量约700.7万台，同比增长114.5%。其中，2023年第四季度中国折叠屏手机市场出货量约277.1万台，同比增长149.6%，数据看上去确实还不错，增长也很强势。不过与2023年中国市场智能手机2.7亿左右出货量相比，这个数据就着实不太够看了。总的来说
你想知道word折叠吗
Mar 19, 2024 pm 07:49 PM
在word编辑文本内容后，需要查看检查所编辑的内容。如果内容较多时，查阅比较不方便，如何解决这个问题呢，这时就需要word折叠的方法。下面就让小编跟各位小伙伴们分享下方法教程吧！首先，打开电脑上的Word文档，输入所需内容并选中，然后单击菜单栏中的“开始”选项，接着选择一个样式应用到刚才选中的文字段落中。你可以参考下方图片中标有红色圈的部分。2.然后这样，选中的文字段落就变换了样式，多了一个小箭头，如下方图片红色圈中部分所示：3.点击小箭头就能自由展开或者折叠先前所选的文字段落，或者直接右键，从
三星万元折叠机皇W25曝光：500万像素屏下前摄 机身更薄了
Aug 23, 2024 pm 12:43 PM
8月23日消息，三星即将推出新款折叠手机W25，预计9月底亮相，将在屏下前摄、机身厚度上作出相应的提升。据报道，三星W25代号为Q6A，将配备500万像素屏下摄像头，相较于GalaxyZFold系列的400万像素摄像头有所提升。此外，W25的外屏前置摄像头和超广角摄像头预计分别为1000万和1200万像素。在设计上，W25折叠状态下的厚度约为10毫米，比标准版GalaxyZFold6薄约2毫米。屏幕方面，W25的外屏为6.5英寸，内屏为8英寸，而GalaxyZFold6的外屏为6.3英寸，内屏为
你知道Word表格怎么求和吗
Mar 21, 2024 pm 01:10 PM
有时候，我们在Word表格中会经常遇到计数的问题；一般遇到这样的问题，大部分同学都回把Word表格复制到Excel中来计算；还有一部分同学会默默地拿起计算器去算。那有没有快速的方法来计算呢？当然有啊，其实在Word中也是可以计算求和的。那么，你知道该怎么操作吗？今天，我们就来一起来看一下吧！废话不多说，有需要的小伙伴赶紧收藏起来吧！步骤详情：1、首先，我们打开电脑上的Word软件，打开需要处理的文档。（如图所示）2、接着，我们将光标定位在求和数值所在的单元格上（如图所示）；然后，我们点击【菜单栏
