Question

我需要折叠和展开嵌套行的一些帮助。目前，我在下面的代码在第一个级别可以按需扩展和折叠，但后续级别也可以显示。

$(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>

我试图实现在单击“ collapseTitle”时扩展1级，并且仅在单击“ collapseAccount”时扩展2级。现在我知道我的代码应该类似于下面的内容，但是我正在努力……

<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>

任何帮助将不胜感激。

Answer 1

以下代码应执行此操作。我希望它对您要实现的目标有所帮助：

折叠/展开列，
在单击时折叠/扩展account行之后的所有行（直到下一个account行）

您唯一需要做的就是将类account添加到更高级别的行中。通过循环显示这些内容时，您可以非常轻松地做到这一点。

.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>

Answer 2

您的jQuery选择器对于toggleClass而言只是一点点。您可以使用该行的类名称进行切换。另外，您还应该创建一个要切换的类，以显示/隐藏该行。例如：

编辑：

我现在动态创建标题和行，以使您更好地了解如何使用data-属性。

您将在data-属性上具有匹配的标题td和行td，因此，当您单击标题时，将显示相应的tr。因此，例如，如果单击标题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>

Answer 3

我设法找到了想要的答案...谢谢“ stackoverfloweth”， Answer To My Question

到目前为止，对我有帮助的代码段如下，

$('.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;
    }
} });

折叠和扩展jQuery中的多个嵌套行

3 个答案: