style.css
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;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('tr.parent').click(function(){ // 获取所谓的父行
$(this)
.toggleClass("selected") // 添加/删除高亮
.siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
});
})
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01">
<td colspan="3">前台设计组</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>
</tbody>
</table>
</body>
</html>
效果图：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('tr.parent').click(function(){ // 获取所谓的父行
$(this)
.toggleClass("selected") // 添加/删除高亮
.siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
}).click();
})
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01">
<td colspan="3">前台设计组</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>
</tbody>
</table>
</body>
</html>
效果图：
相关推荐
本文将深入探讨如何使用jQuery实现"展开收缩"效果，这种效果常见于网上商城的商品详情展示、菜单导航等场景，为用户提供更加直观且易用的界面。 首先，我们需要了解jQuery的基本用法。jQuery通过选择器选中页面中的...
在这个场景中，"jq 表格拖拽"是指利用jQuery实现的一种功能，允许用户通过鼠标拖动来调整表格行或列的位置，提供更加互动和个性化的用户体验。这个功能在数据展示、数据分析或者任何需要用户自定义排序的场景中非常...
bootstrap-table-expandable是一款非常实用的基于Bootstrap的可展开表格行的jQuery表格插件。该表格插件通过设置可以使每一行都具有展开和收缩的功能，行展开时可以显示额外的信息。而且该插件使用非常简单。
"基于jQuery可以伸缩的表格"就是针对这一需求提出的一种解决方案，它利用jQuery库的强大功能，实现了表格列宽的动态调整，从而让用户在查看或操作数据时更加方便。 jQuery是一个轻量级、高性能的JavaScript库，它的...
"JQ伸缩广告"是一种使用JavaScript库jQuery实现的动态广告展示技术，它能吸引用户的注意力，提升广告的可见性和互动性。这种广告设计通常包括图片或内容的平滑缩放效果，使得广告在页面加载时能够有节奏地展开，从而...
"JQ 表格内容过滤"是指利用jQuery库来实现对表格数据的筛选和过滤功能，提高用户交互体验。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中，我们将探讨如何利用...
标题“JQ 收起和展开的菜单”指的是使用jQuery来实现网页上菜单的交互功能，即点击后可以收起或展开子菜单。这种功能在网站导航中非常常见，它提供了良好的用户体验，使用户能够方便地浏览和选择不同的页面或功能。 ...
jquery 前后移动表格整列function initTd(){ $("td").each(function(){ if($(this).index()==0){ $(this).find("a:first").addClass("hui"); }else if($(this).index()==3){ $(this).find("a:last")....
在IT行业中，JavaScript是一种广泛使用的前端编程语言，而jQuery（简称JQ）是基于JavaScript的库，极大地简化了DOM操作、事件处理以及动画效果。在本主题中，我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序...
本教程将聚焦于“JQuery实战——可编辑的表格”，旨在帮助初学者掌握如何利用jQuery创建交互性强、功能丰富的表格。 首先，我们需要了解表格的基本HTML结构。一个简单的表格由`<table>`标签开启，`</table>`标签...
本文将深入探讨如何使用jQuery操作表格，基于给出的资源，我们可以看到一个与表格相关的示例。 首先，"tb-bg.gif"可能是一个表格背景图像，用于美化表格的视觉效果。在网页设计中，背景图片可以提升表格的整体风格...
**jq弹性表格控件**，也被称为`tilesjs`，是一种基于jQuery的高效、灵活的表格展示解决方案。这种控件的主要特点是能够自动伸缩，适应表格数据量的变化，为用户提供流畅的浏览体验。在Web应用中，特别是在数据密集型...
本主题关注的是如何利用jQuery实现表格的数据筛选、排序和分页功能，这些都是网页数据展示中常见的需求。 一、jQuery表格筛选 表格筛选功能允许用户通过输入关键词快速查找表格中的特定数据。在jQuery中，可以使用`...
在网页设计中，有时我们需要创建交互式的表格，使得用户可以展开或折叠表格的行来查看或隐藏详细信息。本文将详细讲解如何使用jQuery实现这样的功能，即点击表格的某一行，其下方的相关行会展开显示，再次点击则折叠...
在本文中，我们将深入探讨如何使用jQuery（JQ）实现一个简单的DIV元素展开与收缩的效果，这通常被称为手风琴效果。手风琴效果是一种常见的交互设计，它允许用户逐个展开或收缩内容区域，以节省页面空间并提高用户...
"jq收起展开效果"是指利用jQuery实现元素的隐藏与显示，这种功能常见于菜单、折叠面板或者任何需要动态隐藏和展示内容的场景。下面将详细讲解如何使用jQuery实现这样的效果。 首先，你需要在HTML文件中引入jQuery库...
jQuery作为一个广泛使用的JavaScript库，提供了丰富的插件来帮助开发者实现各种功能，包括表格分页。本篇文章将深入探讨jQuery插件在实现表格分页中的应用及其相关知识点。 一、jQuery和表格分页基础 1. jQuery...
在网页设计中，当表格（Table）中的数据过多时，为保持页面的整洁与易读性，通常会采用滚动条来展示超出视口范围的内容。本示例将详细讲解如何利用jQuery库为普通的HTML表格添加滚动条，以实现数据的高效浏览。 一...
jQuery提供了方便的方法来操作表格元素，如`$('table')`选择表格，`$('tr')`选择表格行，`$('td')`选择表格单元格等。这些选择器可以帮助我们实现对表格的高亮显示、点击事件等。 3. **自动滚动**：在描述中提到的...