Javascript - 展开/折叠表格行

时间：2018-03-19 13:27:22

标签： javascript

鉴于以下表格/代码，我想添加两个项目。我不太了解JavaScript，这段代码是由另一位程序员留下的。代码以其他方式按预期工作。

以下是两个项目：

  1. 该表应以折叠状态开始。所有节点都应该是 坍塌到'祖父母'级别。
  2. 应该有一个“全部展开”链接和一个单独的“全部折叠”链接。

    3. 这是我正在使用的表格：

    $(function() {
        $('#mytable').on('click', '.toggle', function () {
            var findChildren = function (tr) {
                var depth = tr.data('depth');
                return tr.nextUntil($('tr').filter(function () {
                    return $(this).data('depth') <= depth;
                }));
            };
    
            var el = $(this);
            var tr = el.closest('tr');
            var children = findChildren(tr);
    
            var subnodes = children.filter('.expand');
            subnodes.each(function () {
                var subnode = $(this);
                var subnodeChildren = findChildren(subnode);
                children = children.not(subnodeChildren);
            });
    
            if (tr.hasClass('collapse')) {
                tr.removeClass('collapse').addClass('expand');
                children.hide();
            } else {
                tr.removeClass('expand').addClass('collapse');
                children.show();
            }
            return children;
        });
    });
    table td, th {
        border: 1px solid #eee;
        font-family: Arial;
        font-size: 16px;
    }
    .level0 td:first-child {
        padding-left: 5px;
    }
    .level1 td:first-child {
        padding-left: 25px;
    }
    .level2 td:first-child {
        padding-left: 50px;
    }
    .level3 td:first-child {
        padding-left: 75px;
    }
    
    .collapse .toggle {
        background: url("open.gif");
        background-repeat: no-repeat;
    }
    .expand .toggle {
        background: url("closed.gif");
        background-repeat: no-repeat;
    }
    .toggle {
        height: 20px;
        width: 20px;
        display: inline-block;
    }
    .age {
            text-align: center;
    }
    .nam {
            text-align: left;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="mytable" style="border-collapse: collapse" cellpadding="6">
        <thead>
        <tr>
            <th width="250px">Type</th>
            <th width="50px">Age</th>
            <th width="50px">Name</th>
        </tr>
        </thead>
    
        <tr data-depth="0" class="collapse level0">
            <td><span class="toggle collapse"></span>GRANDPARENT</td>
            <td class="age">80</td>
            <td class="nam">Ethel</td>
        </tr>
    
        <tr data-depth="1" class="collapse level1">
            <td><span class="toggle"></span>CHILD 1</td>
            <td class="age">55</td>
            <td class="nam">Susan</td>
        </tr>
    
        <tr data-depth="2" class="collapse level2">
            <td><span class="toggle collapse"></span>GRANDCHILD 1</td>
            <td class="age">32</td>
            <td class="nam">Kristen</td>
        </tr>
    
        <tr data-depth="3" class="collapse collapsable level3">
            <td>GREAT GRANCHILD 1</td>
            <td class="age">12</td>
            <td class="nam">Layla</td>
        </tr>
    
        <tr data-depth="1" class="collapse collapsable level1">
            <td><span class="toggle collapse"></span>CHILD 2</td>
            <td class="age">52</td>
            <td class="nam">Joanne</td>
        </tr>
    
        <tr data-depth="2" class="collapse collapsable level2">
            <td><img src="list.gif"/>GRANDCHILD 2</td>
            <td class="age">28</td>
            <td class="nam">Marie</td>
        </tr>
    
    </table>

    我需要添加什么才能完成此任务？

1 个答案:

答案 0 :(得分：1)

这是你想要的那种结果吗？
（我用你的代码玩了一下，让它或多或少地像我认为的那样工作。）

无论如何，我不了解所做的一切，我建议你只使用JS解决方案。
但是......我认为tr中的类可以被修改，以便在加载页面时获得“隐藏”结果而不使用任何JS。
我评论了我添加新内容的地方：
编辑：我也清理了一些代码。

＆＃13;
＆＃13; 
$('.collapse').on('click', function() {
  //console.log($(this).attr('data-depth'));
  var findChildren = function(tr) {
    var depth = tr.data('depth');
    return tr.nextUntil($('tr').filter(function() {
      return $(this).data('depth') <= depth;
    }));
  };

  var children = findChildren($(this));
  if ($(children).is(':visible')) {
    $(this).addClass("closed");
    $(children).hide();
  } else {
    $(this).removeClass("closed");
    $(children).show();
    var children = findChildren($(".closed"));
    $(children).hide();
  }

});


// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
  $("#mytable tr.collapse").removeClass("closed").show();
});
$('#hide_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").hide();
  $("#mytable tr.collapse.level0").addClass("closed");
});
$(document).ready(function() {
  $('#hide_all').trigger('click');
});
＆＃13; 
table td,
th {
  border: 1px solid #eee;
  font-family: Arial;
  font-size: 16px;
}

.level0 td:first-child {
  padding-left: 10px;
}

.level1 td:first-child {
  padding-left: 30px;
}

.level2 td:first-child {
  padding-left: 50px;
}

.level3 td:first-child {
  padding-left: 70px;
}

.age {
  text-align: center;
}

.nam {
  text-align: left;
}

.closed td:first-child::before {
  content: "• ";
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HERE IS THE HTML I ADDED FOR THE BUTTONS -->
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<!-- END -->

<table id="mytable" style="border-collapse: collapse" cellpadding="6">
  <thead>
    <tr>
      <th width="250px">Type</th>
      <th width="50px">Age</th>
      <th width="50px">Name</th>
    </tr>
  </thead>

  <tr data-depth="0" class="collapse level0">
    <td>GRANDPARENT</td>
    <td class="age">80</td>
    <td class="nam">Ethel</td>
  </tr>

  <tr data-depth="1" class="collapse level1">
    <td>CHILD 1</td>
    <td class="age">55</td>
    <td class="nam">Susan</td>
  </tr>

  <tr data-depth="2" class="collapse level2">
    <td>GRANDCHILD 1</td>
    <td class="age">32</td>
    <td class="nam">Kristen</td>
  </tr>

  <tr data-depth="3" class="collapse level3">
    <td>GREAT GRANCHILD 1</td>
    <td class="age">12</td>
    <td class="nam">Layla</td>
  </tr>

  <tr data-depth="1" class="collapse level1">
    <td>CHILD 2</td>
    <td class="age">52</td>
    <td class="nam">Joanne</td>
  </tr>

  <tr data-depth="2" class="collapse level2">
    <td>GRANDCHILD 2</td>
    <td class="age">28</td>
    <td class="nam">Marie</td>
  </tr>

</table>
＆＃13;
＆＃13;
＆＃13;

这是我上一版之前的片段，以防“清洁”的片段不能满足您的需求：

＆＃13;
＆＃13; 
$('.collapse').on('click', function() {
  //console.log($(this).attr('data-depth'));
  var findChildren = function(tr) {
    var depth = tr.data('depth');
    return tr.nextUntil($('tr').filter(function() {
      return $(this).data('depth') <= depth;
    }));
  };

  var children = findChildren($(this));
  if ($(children).is(':visible')) {
    $(children).hide();
  } else {
    $(children).show();
  }

});


// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").show();
});
$('#hide_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").hide();
});
$(document).ready(function() {
  $('#hide_all').trigger('click');
});
＆＃13; 
table td,
th {
  border: 1px solid #eee;
  font-family: Arial;
  font-size: 16px;
}

.level0 td:first-child {
  padding-left: 5px;
}

.level1 td:first-child {
  padding-left: 25px;
}

.level2 td:first-child {
  padding-left: 50px;
}

.level3 td:first-child {
  padding-left: 75px;
}

.collapse .toggle {
  background: url("open.gif");
  background-repeat: no-repeat;
}

.expand .toggle {
  background: url("closed.gif");
  background-repeat: no-repeat;
}

.toggle {
  height: 20px;
  width: 20px;
  display: inline-block;
}

.age {
  text-align: center;
}

.nam {
  text-align: left;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HERE IS THE HTML I ADDED -->
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<!-- END -->

<table id="mytable" style="border-collapse: collapse" cellpadding="6">
  <thead>
    <tr>
      <th width="250px">Type</th>
      <th width="50px">Age</th>
      <th width="50px">Name</th>
    </tr>
  </thead>

  <tr data-depth="0" class="collapse level0">
    <td><span class="toggle collapse"></span>GRANDPARENT</td>
    <td class="age">80</td>
    <td class="nam">Ethel</td>
  </tr>

  <tr data-depth="1" class="collapse level1">
    <td><span class="toggle"></span>CHILD 1</td>
    <td class="age">55</td>
    <td class="nam">Susan</td>
  </tr>

  <tr data-depth="2" class="collapse level2">
    <td><span class="toggle collapse"></span>GRANDCHILD 1</td>
    <td class="age">32</td>
    <td class="nam">Kristen</td>
  </tr>

  <tr data-depth="3" class="collapse collapsable level3">
    <td>GREAT GRANCHILD 1</td>
    <td class="age">12</td>
    <td class="nam">Layla</td>
  </tr>

  <tr data-depth="1" class="collapse collapsable level1">
    <td><span class="toggle collapse"></span>CHILD 2</td>
    <td class="age">52</td>
    <td class="nam">Joanne</td>
  </tr>

  <tr data-depth="2" class="collapse collapsable level2">
    <td><img src="list.gif" />GRANDCHILD 2</td>
    <td class="age">28</td>
    <td class="nam">Marie</td>
  </tr>

</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题