嵌套的HTML表無法正確顯示

Question

我正在嘗試在HTML表中創建父行和子行的數據。 目前該代碼可以運行，但是由於我不熟悉JavaScript，所以我並不總是選擇正確的元素。 在提供的代碼中，單擊第一個父級僅顯示一個孩子，而不同時顯示兩個孩子，單擊第二個父級僅顯示第一個孩子的第一個孩子。

我90％確信該錯誤出在JavaScript中。

 var toggler = document.getElementsByClassName("parent"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { this.parentElement.querySelector(".child").classList.toggle("active"); this.classList.toggle("parent-down"); this.parentElement.querySelector(".arrow").classList.toggle("arrow-down "); }); } 

 .parent { cursor: pointer; user-select: none; /* Prevent text selection */ font-size: 16px; } .arrow-down::before { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ ' transform: rotate(90deg); } .parent-down { border: 2px solid rgb(21, 67, 96); font-weight: bold; } /* Hide the child list */ .child { display: none; background-color: rgb(240, 250, 255); font-size: 14px; } .active { display: table-row; } .arrow::before { content: "\\25B6"; color: black; display: inline-block; margin-right: 6px; } 

 <table> <tr> <th>Word</th> <th>Number of Letters</th> <th>Do I like the word?</th> </tr> <tr class="parent"> <td class="arrow">Long Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Bamboozle</td> <td>9</td> <td>Yes.</td> </tr> <tr class="child"> <td>Peritoneum</td> <td>10</td> <td>No.</td> </tr> <tr class="parent"> <td class="arrow">Short Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Squeak</td> <td>6</td> <td>Yes.</td> </tr> </table> 

Answer 1

這有點困難，因為您的html結構對此並不理想。 但是，您可以使用nextElementSibling屬性並將其放在while循環中以查找所需的所有元素。 您可能想為while循環編寫一個緊急出口，以防萬一出問題。 如果我們已經獲得了最后一個元素，請檢查下一個兄弟姐妹是否不為null。

還刪除了類切換中的空格，因為這是不允許的。

但是，我建議更改您的html結構並將折疊按鈕移到表格外。 表格最適合表格數據，而按鈕和其他布局功能最適合。 對於像盲人一樣使用面向文本的瀏覽器的人來說，這將很煩人。 數據一詞可以很好地放入表格中。

有了更好的元素結構，選擇屬於正確的父元素的元素也將變得更加容易，因此您無需在while循環中進行狡猾的操作。

 var toggler = document.getElementsByClassName("parent"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { var nextSibling = this.nextElementSibling; while(nextSibling !== null && nextSibling.classList.contains("child")) { nextSibling.classList.toggle("active"); nextSibling = nextSibling.nextElementSibling; } this.classList.toggle("parent-down"); this.querySelector(".arrow").classList.toggle("arrow-down"); }); } 

 .parent { cursor: pointer; user-select: none; /* Prevent text selection */ font-size: 16px; } .arrow-down::before { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ ' transform: rotate(90deg); } .parent-down { border: 2px solid rgb(21, 67, 96); font-weight: bold; } /* Hide the child list */ .child { display: none; background-color: rgb(240, 250, 255); font-size: 14px; } .active { display: table-row; } .arrow::before { content: "\\25B6"; color: black; display: inline-block; margin-right: 6px; } 

 <table> <tr> <th>Word</th> <th>Number of Letters</th> <th>Do I like the word?</th> </tr> <tr class="parent"> <td class="arrow">Long Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Bamboozle</td> <td>9</td> <td>Yes.</td> </tr> <tr class="child"> <td>Peritoneum</td> <td>10</td> <td>No.</td> </tr> <tr class="parent"> <td class="arrow">Short Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Squeak</td> <td>6</td> <td>Yes.</td> </tr> </table> 

Answer 2

使用循環，直到nextElementSibling沒有.child類。

 var toggler = document.getElementsByClassName("parent"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { this.parentElement.querySelector(".arrow").classList.toggle("arrow-down"); let next = this.nextElementSibling; while(next && next.classList.contains('child')) { next.classList.toggle('active'); this.classList.toggle("parent-down"); next = next.nextElementSibling; } }) }; 

 .parent { cursor: pointer; user-select: none; /* Prevent text selection */ font-size: 16px; } .arrow-down::before { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .parent-down { border: 2px solid rgb(21, 67, 96); font-weight: bold; } /* Hide the child list */ .child { display: none; background-color: rgb(240, 250, 255); font-size: 14px; } .active { display: table-row; } .arrow::before { content: "\\25B6"; color: black; display: inline-block; margin-right: 6px; } 

 <table> <tr> <th>Word</th> <th>Number of Letters</th> <th>Do I like the word?</th> </tr> <tr class="parent"> <td class="arrow">Long Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Bamboozle</td> <td>9</td> <td>Yes.</td> </tr> <tr class="child"> <td>Peritoneum</td> <td>10</td> <td>No.</td> </tr> <tr class="parent"> <td class="arrow">Short Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Squeak</td> <td>6</td> <td>Yes.</td> </tr> </table> 

Answer 3

我所做的主要更改是在父母上設置了ID，並在其孩子上設置了與班級相同的ID。

 var togglers = document.querySelectorAll(".parent"); togglers.forEach(function(toggler) { toggler.addEventListener("click", function() { document.querySelectorAll("." + this.id).forEach(function (child) { child.classList.toggle("active"); }) this.classList.toggle("parent-down"); this.querySelector(".arrow").classList.toggle("arrow-down"); }) }) 

 .parent { cursor: pointer; user-select: none; /* Prevent text selection */ font-size: 16px; } .arrow-down::before { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ transform: rotate(90deg); } .parent-down { border: 2px solid rgb(21, 67, 96); font-weight: bold; } /* Hide the child list */ .child { display: none; background-color: rgb(240, 250, 255); font-size: 14px; } .active { display: table-row; } .arrow::before { content: "\\25B6"; color: black; display: inline-block; margin-right: 6px; } 

 <table> <tr> <th>Word</th> <th>Number of Letters</th> <th>Do I like the word?</th> </tr> <tr id="parent01" class = "parent"> <td class = "arrow">Long Words</td> <td>-</td> <td>-</td> </tr> <tr class = "child parent01"> <td>Bamboozle</td> <td>9</td> <td>Yes.</td> </tr> <tr class = "child parent01"> <td>Peritoneum</td> <td>10</td> <td>No.</td> </tr> <tr id="parent02" class = "parent"> <td class = "arrow">Short Words</td> <td>-</td> <td>-</td> </tr> <tr class = "child parent02"> <td>Squeak</td> <td>6</td> <td>Yes.</td> </tr> </table> 

Answer 4

您也可以使用ES6語法的forEach循環解決此問題

 let toggler = document.querySelectorAll(".parent"); toggler.forEach(element => { element.addEventListener("click", function() { let nextSibling = this.nextElementSibling; while(nextSibling != null && nextSibling.classList.contains("child")) { nextSibling.classList.toggle("active"); nextSibling = nextSibling.nextElementSibling; } this.classList.toggle("parent-down"); this.querySelector(".arrow").classList.toggle("arrow-down"); }); }); 

 .parent { cursor: pointer; user-select: none; /* Prevent text selection */ font-size: 16px; } .arrow-down::before { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ ' transform: rotate(90deg); } .parent-down { border: 2px solid rgb(21, 67, 96); font-weight: bold; } /* Hide the child list */ .child { display: none; background-color: rgb(240, 250, 255); font-size: 14px; } .active { display: table-row; } .arrow::before { content: "\\25B6"; color: black; display: inline-block; margin-right: 6px; } 

 <table> <tr> <th>Word</th> <th>Number of Letters</th> <th>Do I like the word?</th> </tr> <tr class="parent"> <td class="arrow">Long Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Bamboozle</td> <td>9</td> <td>Yes.</td> </tr> <tr class="child"> <td>Peritoneum</td> <td>10</td> <td>No.</td> </tr> <tr class="parent"> <td class="arrow">Short Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Squeak</td> <td>6</td> <td>Yes.</td> </tr> </table> Run code snippet 

Answer 5

 var toggler = document.getElementsByClassName("parent"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { this.classList.toggle("active"); nextSibling(this); }); } var nextSibling = function(element) { if (!element.nextElementSibling || element.nextElementSibling.classList.contains("parent")) return false; element.nextElementSibling.classList.toggle("active-row"); return arguments.callee(element.nextElementSibling); } 

 .parent { cursor: pointer; user-select: none; /* Prevent text selection */ font-size: 16px; } .active .arrow::before { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ ' transform: rotate(90deg); } /* Hide the child list */ .child { background-color: rgb(240, 250, 255); font-size: 14px; display: none; } .active { color: red; } .active-row { display: table-row; } .arrow::before { content: "\\25B6"; color: black; display: inline-block; margin-right: 6px; } 

 <table> <tr> <th>Word</th> <th>Number of Letters</th> <th>Do I like the word?</th> </tr> <tr class="parent"> <td class="arrow">Long Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Bamboozle</td> <td>9</td> <td>Yes.</td> </tr> <tr class="child"> <td>Peritoneum</td> <td>10</td> <td>No.</td> </tr> <tr class="parent"> <td class="arrow">Short Words</td> <td>-</td> <td>-</td> </tr> <tr class="child"> <td>Squeak</td> <td>6</td> <td>Yes.</td> </tr> </table> 

使用nextElementSibling選擇連續的同級類“ .child”。 請查看代碼段。