[英]Collapsible Table Rows with jQuery
我正在寻找一种使表行可折叠或扩展为多个级别的方法。 默认视图应该折叠(也许可以显示级别0和1?)
这就是我现在从另一个问题的答案中收集到的信息。
<table>
<tr class="header">
<th>A</th>
<th>B</th>
</tr>
<tr class="level_0" id="10">
<td>10</td>
<td> Level 0</td>
</tr>
<tr class="level_1 parent_10" id="11">
<td>10.1</td>
<td>Level 1</td>
</tr>
<tr class="level_1 parent_10" id="12">
<td >10.2</td>
<td>Level 1</td>
</tr>
<tr class="level_2 parent_12" id="13">
<td>10.2.1</td>
<td>Level 2</td>
</tr>
<tr class="level_0" id="20">
<td>20</td>
<td> Level 0</td>
</tr>
<tr class="level_1 parent_20" id="21">
<td>20.1</td>
<td>Level 1</td>
</tr>
</table>
JavaScript:
if (typeof jQuery === 'undefined') throw "jQuery Required";
jQuery(function ($) {
var treeTable = {
parentClassPrefix : '',
collapsedClass : 'collapsed',
init : function(parentClassPrefix) {
this.parentClassPrefix = parentClassPrefix;
$('table').on('click', 'tr', function () {
treeTable.toggleRowChildren($(this));
});
},
toggleRowChildren : function(parentRow) {
var childClass = this.parentClassPrefix+parentRow.attr('id');
var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);
childrenRows.toggle();
childrenRows.each(function(){
if (!$(this).hasClass(treeTable.collapsedClass)) {
treeTable.toggleRowChildren($(this));
}
});
parentRow.toggleClass(this.collapsedClass);
}
};
treeTable.init('parent_');
});
这样的事情-如果我花更多的时间看一下,可能会做得更好。 但这只是一个简单的例子。
$(document).ready(function() { $(".level_0").each(function() { console.log("IN HERE"); $(this).nextUntil('tr.level_0').toggle(); }); }); $(document).on("click", '.level_0', function() { $(this).nextUntil('tr.level_0').toggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table> <tr class="header"> <th>A</th> <th>B</th> </tr> <tr class="level_0" id="10"> <td>10</td> <td> Level 0</td> </tr> <tr class="level_1 parent_10" id="11"> <td>10.1</td> <td>Level 1</td> </tr> <tr class="level_1 parent_10" id="12"> <td >10.2</td> <td>Level 1</td> </tr> <tr class="level_2 parent_12" id="13"> <td>10.2.1</td> <td>Level 2</td> </tr> <tr class="level_0" id="20"> <td>20</td> <td> Level 0</td> </tr> <tr class="level_1 parent_20" id="21"> <td>20.1</td> <td>Level 1</td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.