Сгибание таблицы CSS / JavaScript: Имея первую полосу, которая разворачивает мою таблицу, как я могу добавить вторую нижнюю полосу, которая складывает ее снова? - PullRequest
Новая
       12

Сгибание таблицы CSS / JavaScript: Имея первую полосу, которая разворачивает мою таблицу, как я могу добавить вторую нижнюю полосу, которая складывает ее снова?

1 голос
/ 11 октября 2019

Я использую CSS и JavaScript в таблице , которая сворачивает часть содержимого: 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60" >
<title>Log for Today</title>
<style>
table {
    font-family: arial, sans-serif;
    width: 100%;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 0.9em;
    border: 1px solid #dddddd;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #dddddd;
    border-collapse: collapse;
    text-align: left;
    padding: 8px;
}

.folding {
  background-color: #6699ff;
/*  color: white; */
  cursor: pointer;
/*  padding: 0 8px;  */
    border: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .folding:hover {
/*  background-color: #555; */
  background-color: #999999;
}

.content {
  padding: 0 10px;  
  background-color: #f1f1f1;
  max-height: 0; 
    transition: max-height 0.3s ease-out;
    overflow: auto;
}

.Tabla01 tr:nth-of-type(1) {background: #33cc33;}
.Tabla01 tr:nth-of-type(2) {background: #33cc33;}
.Tabla01 tr:nth-of-type(3) {background: #f9f906;}

.Tabla02 tr:nth-of-type(1) {background: #f9f906;}
.Tabla02 tr:nth-of-type(2) {background: #f9f906;}

.Tabla03 tr:nth-of-type(1) {background: #33cc33;}
.Tabla03 tr:nth-of-type(2) {background: #33cc33;}

.Tabla04 tr:nth-of-type(1) {background: #33cc33;}
.Tabla04 tr:nth-of-type(2) {background: #33cc33;}

}
</style>
</head>
<body>
<h2>Log for today</h2>
<table class="Tabla01">
<tr><td>2019-09-30</td><td>08:40</td><td>Balancer ON</td>
<tr><td>2019-03-28</td><td>13:05</td><td>Internet Bandwidth OK</td>
<tr><td>2019-07-01</td><td>19:27</td><td>Ethernet WAN1 OK</td>
</table>
<button class="folding">( Details - Click to unfold )</button>
<div class="content">
    <table class="folding Tabla02">
<tr><td>2019-06-18</td><td>09:15</td><td>Ethernet Card connected to Internet line 1 is responding</td></tr>
<tr><td>2019-06-18</td><td>09:15</td><td>Ethernet Card connected to Internet line 1 has a ping below 100 ms - OK</td></tr>
    </table>
</div>
<table class="Tabla03">
<tr><td>2019-07-01</td><td>19:27</td><td>WiFi AP-1 responding</td></tr>
<tr><td>2019-07-01</td><td>19:27</td><td>WiFi AP-2 responding</td></tr>
</table>

<script>
var coll = document.getElementsByClassName("folding");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 350 + "px";
    } 
  });
}
</script>

</body>
</html>

Результаты хорошие, но я бы хотел добавить в секундуБар в конце развернутого стола (иногда развернутые столы длинные, поэтому мне кажется, это хорошая идея), который должен снова сложить . Это изображение является примером того, чего я хочу достичь:

Unfolded table - bottom bar should fold again

И это код с новой (не работающей) панелью, добавленной ниже: 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60" >
<title>Network Log for Today</title>
<style>
table {
    font-family: arial, sans-serif;
    width: 100%;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 0.9em;
    border: 1px solid #dddddd;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #dddddd;
    border-collapse: collapse;
    text-align: left;
    padding: 8px;
}

.folding {
  background-color: #6699ff;
  cursor: pointer;
    border: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .folding:hover {
  background-color: #999999;
}

.foldingend {
  background-color: #6693ff;
  cursor: pointer;
    border: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .foldingend:hover {
  background-color: #999999;
}

.content {
  padding: 0 10px;  
  background-color: #f1f1f1;
  max-height: 0; 
    transition: max-height 0.3s ease-out;
    overflow: auto;
}

.Tabla01 tr:nth-of-type(1) {background: #33cc33;}
.Tabla01 tr:nth-of-type(2) {background: #33cc33;}
.Tabla01 tr:nth-of-type(3) {background: #f9f906;}

.Tabla02 tr:nth-of-type(1) {background: #f9f906;}
.Tabla02 tr:nth-of-type(2) {background: #f9f906;}

.Tabla03 tr:nth-of-type(1) {background: #33cc33;}
.Tabla03 tr:nth-of-type(2) {background: #33cc33;}

.Tabla04 tr:nth-of-type(1) {background: #33cc33;}
.Tabla04 tr:nth-of-type(2) {background: #33cc33;}

}
</style>
</head>
<body>
<h2>Network Log for today</h2>
<table class="Tabla01">
<tr><td>2019-09-30</td><td>08:40</td><td>Balancer ON</td>
<tr><td>2019-03-28</td><td>13:05</td><td>Internet Bandwidth OK</td>
<tr><td>2019-07-01</td><td>19:27</td><td>Ethernet WAN1 OK</td>
</table>
<button class="folding">( Details - Click to unfold )</button>
<div class="content">
    <table class="folding Tabla02">
<tr><td>2019-06-18</td><td>09:15</td><td>Ethernet Card connected to Internet line 1 is responding</td></tr>
<tr><td>2019-06-18</td><td>09:15</td><td>Ethernet Card connected to Internet line 1 has a ping below 100 ms - OK</td></tr>
    </table>
<button class="foldingend">( Details - Click to fold )</button>
</div>
<table class="Tabla03">
<tr><td>2019-07-01</td><td>19:27</td><td>WiFi AP-1 responding</td></tr>
<tr><td>2019-07-01</td><td>19:27</td><td>WiFi AP-2 responding</td></tr>
</table>

<script>
var coll = document.getElementsByClassName("folding");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 350 + "px";
    } 
  });
}
</script>

</body>
</html>

Но я не знаю, как мне добавить возможность фолда снова к этому второму бару. Я на самом деле скопировал JavaScript (в конце моего кода), который разворачивается, поэтому я должен признать, что не до конца его понимаю.

Может кто-нибудь помочь мне, пожалуйста?

1 Ответ

1 голос
/ 11 октября 2019

Поскольку вы помещаете кнопку сворачивания в родительский узел, который хотите свернуть, вы должны выбрать родительский элемент вместо родных элементов для свертывания.

Попробуйте: 

<script>
var unfoldBtns = document.getElementsByClassName("folding");
for (var i = 0; i < unfoldBtns.length; i++) {
  unfoldBtns[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 350 + "px";
    } 
  });
}

var foldBtns = document.getElementsByClassName("foldingend");
for (var i = 0; i < foldBtns.length; i++) {
  foldBtns[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.parentNode; // <-- select parent instead of siblings
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 350 + "px";
    } 
  });
}
</script>
...