前端笔记-jq实现“detail” table操作

最新推荐文章于 2024-04-13 21:01:06 发布

原创最新推荐文章于 2024-04-13 21:01:06 发布 · 770 阅读

0 ·

CC 4.0 BY-SA版权

笔记同时被 2 个专栏收录

14 篇文章

订阅专栏

随记

10 篇文章

订阅专栏

本文介绍了如何使用jQuery实现表格中的详情操作，当点击table的某一行时，隐藏或显示对应的详细信息tr。通过提供一个参照链接和jQuery代码示例，帮助理解如何处理元素选择和类名操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先写几个要求：
在一个table标签中多个tr标签添加点击隐藏详情tr,效果可以看代码：
这是一个参照链接：http://www.javascripttoolbox.com/jquery/

这是table在实现时候的代码
<table id="detail_table" class="detail">
	<col style="width:40px;">
	<col style="width:80px;">
	<col style="width:150px;">
	<col style="width:40px;">
<thead>
	<tr>
		<th>ID</th>
		<th colspan="2">Name</th>
		<th>Total</th>
	</tr>
</thead>
<tbody>
	<tr class="parent" id="row123">
		<td>123</td>
		<td colspan="2">Bill Gates</td>
		<td>100</td>
	</tr>
	<tr class="child-row123">
		<td>&nbsp;</td>
		<td>2007-01-02</td>
		<td>A short description</td>
		<td>15</td>
	</tr>
	<tr class="child-row123">
		<td>&nbsp;</td>
		<td>2007-02-03</td>
		<td>Another description</td>
		<td>45</td>
	</tr>
	<tr class="child-row123">
		<td>&nbsp;</td>
		<td>2007-03-04</td>
		<td>More Stuff</td>
		<td>40</td>
	</tr>

	<tr class="parent" id="row456">
		<td>456</td>
		<td colspan="2">Bill Brasky</td>
		<td>50</td>
	</tr>
	<tr class="child-row456">
		<td>&nbsp;</td>
		<td>2007-01-02</td>
		<td>A short description</td>
		<td>10</td>
	</tr>
	<tr class="child-row456">
		<td>&nbsp;</td>
		<td>2007-02-03</td>
		<td>Another description</td>
		<td>20</td>
	</tr>
	<tr class="child-row456">
		<td>&nbsp;</td>
		<td>2007-03-04</td>
		<td>More Stuff</td>
		<td>20</td>
	</tr>

	<tr class="parent" id="row789">
		<td>789</td>
		<td colspan="2">Phil Upspace</td>
		<td>75</td>
	</tr>
	<tr class="child-row789">
		<td>&nbsp;</td>
		<td>2007-01-02</td>
		<td>A short description</td>
		<td>33</td>
	</tr>
	<tr class="child-row789">
		<td>&nbsp;</td>
		<td>2007-02-03</td>
		<td>Another description</td>
		<td>22</td>
	</tr>
	<tr class="child-row789">
		<td>&nbsp;</td>
		<td>2007-03-04</td>
		<td>More Stuff</td>
		<td>20</td>
	</tr>
</tbody>
</table>

这是jq实现部分：

$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});

可能会遇到一些获取不到元素的问题，可以直接值获取雷元素，把标签元素去掉。
还有有一个可能平时会不怎么用到，就是[@class^=child-]，这个可以解释为获取所有类名以child-开头的类名