jQuery中的可折叠表格 [英] Collapsible table in jQuery
问题描述
我正在尝试创建一个表，该表具有可通过使用jQuery折叠和扩展的标题行.到目前为止，这是我的全部代码:
I'm attempting to make a table that has header rows that can be collapsed and expanded by using jQuery. Here is the entirety of my code thus far:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("tr#cat1.header").click(function () {
$("tr#cat1.child").each(function() {
$(this).slideToggle("fast");
});
});
});
</script>
</head>
<body>
<table>
<tr id="cat1" class="header">
<td>Cat1</td>
<td>Row</td>
</tr>
<tr id="cat1" class="child">
<td>data1</td>
<td>data2</td>
</tr>
<tr id="cat1" class="child">
<td>data3</td>
<td>data4</td>
</tr>
<tr id="cat2" class="header">
<td>Cat1</td>
<td>Row</td>
</tr>
<tr id="cat2" class="child">
<td>data1</td>
<td>data2</td>
</tr>
</table>
</body>
</html>
如果我是正确的话，那么jQuery的英文部分将显示为:当单击ID为'cat1'并且类为'header'的行时，请找到ID为'cat1'的所有行，然后一类孩子"，每一个都有"slideToggle".
If I am correct, the jQuery part in English reads like: "When a row that has an ID of 'cat1' and a class of 'header' is clicked, find all rows that have an id of 'cat1' and a class of 'child', and for each one, slideToggle."
但是，当我运行它并单击标题行时，什么也没有发生.有见识吗?
Yet when I run it and click on a header row, nothing happens. Any insight?
在HTML表中添加了第二个类别.抱歉，我应该更具体一些.我希望能够单击特定类别的标题行，并且仅折叠那些子行，而不折叠页面上的所有子行.这样，表的行为就类似于"accordian"，并且这些行按类别分组在一起.
Added a second category to the HTML table. Sorry, I should have been more specific. I want to be able to click on a header row for a particular category, and have only those child rows collapse, not all child rows on the page. In such a manner the table behaves like an "accordian", and the rows are grouped together by category.
推荐答案
这将导致单击仅影响包含您单击的标题的表中的行，这意味着您可以将其更改为与CSS类一起使用复制ID.
This will cause the click to only affect the rows in the table containing the header you clicked on, which means you can change it to work with a css class instead of duplicating the id.
$("tr#cat1.header").click(function () {
$("tr#cat1.child", $(this).parent()).slideToggle("fast");
});
基本上this是被单击的标头，我们将其包装在jQuery对象中并调用parent()(返回表)，然后将其指定为新查询的上下文.
Basically this is the header that is clicked, we wrap that in a jQuery object and call parent() (which returns the table), and then specify it as the context for the new query.
您的页面现在看起来像这样:
Your page now looks something like this:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("tr.header").click(function () {
$("tr.child", $(this).parent()).slideToggle("fast");
});
});
</script>
</head>
<body>
<table>
<tr class="header">
<td>Cat1</td>
<td>Row</td>
</tr>
<tr class="child">
<td>data1</td>
<td>data2</td>
</tr>
<tr class="child">
<td>data3</td>
<td>data4</td>
</tr>
</table>
<table>
<tr class="header">
<td>Cat1</td>
<td>Row</td>
</tr>
<tr class="child">
<td>data1</td>
<td>data2</td>
</tr>
<tr class="child">
<td>data3</td>
<td>data4</td>
</tr>
</table>
</body>
</html>
这篇关于jQuery中的可折叠表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
