[英]Collapsing and expanding multiple nested rows in jQuery
I need a little help with collapsing and expanding nested rows. 我需要一些帮助来折叠和扩展嵌套行。 Currently my code below expands and collapses as desired at the first level but the subsequent levels also show.
目前我的代码在第一级按需扩展和折叠,但后续级别也显示。
$(document).ready(function(e) { $('.collapseTitle').click(function() { $(this).parent() .parent() .next('tbody') .toggleClass('collapsed'); }); });
.collapsed { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <td class="collapseTitle">Title</td> </tr> </thead> <tbody class="collapsed"> <tr> <td>Level 1</td> </tr> <tr> <td>Level 2</td> </tr> </tbody> </table>
I am trying to achieve that Level 1 expands when "collapseTitle" is clicked and that only when "collapseAccount" is clicked, does Level 2 expand. 当点击“collapseTitle”并且仅当点击“collapseAccount”时,我试图实现Level 1扩展,Level 2会扩展。 Now I know that my code should look something like the below, but I am struggling...
现在我知道我的代码应该如下所示,但我正在努力...
<table>
<thead>
<tr>
<td class="collapseTitle">Title</td>
</tr>
</thead>
<tbody>
<tr class="collapsed account">
<td class="collapseAccount">Level 1</td>
</tr>
<tr class="collapsed level">
<td>Level 2</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(e) {
$('.collapseTitle').click(function() {
$(this).parent().parent().next('tbody tr').toggleClass('account');
});
});
$(document).ready(function(e) {
$('.collapseAccount').click(function() {
$(this).next('tr').toggleClass('level');
});
});
</script>
Any help would be greatly appreciated. 任何帮助将不胜感激。
The following code should do it. 以下代码应该这样做。 I hope it helps with what you want to achieve:
我希望它有助于你想要实现的目标:
account
row when clicking on it (until the next account
row) account
行后面的所有行(直到下一个account
行) The only thing you need to do is add the class account
to the higher level rows. 您需要做的唯一事情是将类
account
添加到更高级别的行。 You can do this pretty easily when you're displaying these with a loop. 当你用循环显示这些时,你可以很容易地做到这一点。
.collapsed { /* using visibility, since display causes layout issues */ /* due to empty rows rows/columns collapsing */ visibility: collapse; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <td>Title1</td> <td>Title2</td> </tr> </thead> <tbody> <tr class="account"> <td class="collapsed">Account Summary - Account A</td> <td class="collapsed">Account Summary - Account A</td> </tr> <tr class="collapsed"> <td class="collapsed">Account Details Part I - Account A</td> <td class="collapsed">Account Details Part I - Account A</td> </tr> <tr class="collapsed"> <td class="collapsed">Account Details Part II - Account A</td> <td class="collapsed">Account Details Part II - Account A</td> </tr> <tr class="account"> <td class="collapsed">Account Summary - Account B</td> <td class="collapsed">Account Summary - Account B</td> </tr> <tr class="collapsed"> <td class="collapsed">Account Details Part I - Account B</td> <td class="collapsed">Account Details Part I - Account B</td> </tr> </tbody> </table> <script> $(document).ready(() => { /* the following handlers expand/collapse the columns */ $('thead > tr > td').each((i, el) => { $(el).click(() => { const colIndex = $(el).index() + 1; const nRows = $('tbody > tr').length; for (let j = 0; j < nRows; j += 1) { let cellSelector = `tbody > tr:nth-child(${j+1})` cellSelector += `> td:nth-child(${colIndex})`; $(cellSelector).toggleClass('collapsed'); } }) }) /* the following handlers expand/collapse the account-details rows */ $('tbody > tr.account').each((i, el) => { $(el).click(() => { $(el).nextUntil('.account').each((j, ele) => { $(ele).toggleClass('collapsed'); }) }) }) }); </script>
Your jQuery selectors are just a bit off for the toggleClass. 你的jQuery选择器对于toggleClass来说有点偏。 You can use the class names of the row to toggle.
您可以使用行的类名进行切换。 Also you should create a class to be toggled that displays the row/hides it.
您还应创建一个要切换的类,以显示行/隐藏它。 For example:
例如:
edit: 编辑:
I now created the titles and rows dynamically to give you a better idea of how this can be done using data-
attributes. 我现在动态创建标题和行,以便更好地了解如何使用
data-
属性完成此操作。
You will have a title td and a row td that match on a data-
attribute, so when you click a title and corresponding tr will be shown. 您将拥有一个与
data-
属性匹配的标题td和一行td,因此当您单击标题时将显示相应的tr。 So for example if you click title 1 (with a data-index=1
) then the tr with the attribute data-rowindex=1
will be shown. 因此,例如,如果单击标题1(
data-index=1
),则将显示属性data-rowindex=1
的tr。
$(document).ready(function(e) { createTable(); $('.collapseTitle').click(function() { // grab the data-index value from the clicked title let index = $(this).attr("data-index"); // find a tr that has the attribute data-rowindex and it matches index $("tr[data-rowindex='" + index + "']").toggleClass("collapsed"); }); }); function createTable(){ // create the titles and the level rows for(let i = 0; i < 3; i++){ // create the title row let $trTitle = $('<tr>'); let $tdTitle = $('<td>', {class: "collapseTitle", text: "Title " + i}); $tdTitle.attr("data-index", i); let $finalTitleRow = $trTitle.append( $tdTitle ); // create the level row let $trLevel = $('<tr>', {class: "collapsed account"} ); $trLevel.attr("data-rowindex", i); let $tdLevel = $('<td>', {text: "Level " + i}); let $finalLevelRow = $trLevel.append( $tdLevel ); // add the title and level row pairs to the head and body $("#myTableHead").append($finalTitleRow[0]); $("#myTableBody").append($finalLevelRow[0]); } }
.collapsed { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead id="myTableHead"> </thead> <tbody id="myTableBody"> </tbody> </table>
I managed to find the answer I was looking for... Thank you to "stackoverfloweth", Answer To My Question 我设法找到了我正在寻找的答案...感谢“stackoverfloweth”, 回答我的问题
The snippet of code which has helped me thus far is below, 到目前为止帮助我的代码片段如下,
$('.parent-row').click(function(){
var $element = $(this).next();
while(!$element.hasClass('parent-row')){
$element.toggle();
if($element.next().length >0){
$element = $element.next();
}
else{
return;
}
} });
$('.child-row.has-children').click(function(){
var $element = $(this).next();
while($element.hasClass('child-child-row')){
$element.toggle();
if($element.next().length >0){
$element = $element.next();
}
else{
return;
}
} });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.