div中的元素從小就被刪除，但無法再次使用

Question

我試圖在div中顯示一個隱藏的表，然后使用display再次隱藏它：none / block切換。 有用。 但是，一旦切換顯示，就無法再次顯示它：沒有一個隱藏它。

HTML：HTML的ID為tableContainer的div為空。

在它旁邊，我有一張桌子，上面有每個單元格中動物家族的名稱，還有一個按鈕。 單擊該按鈕時，它將從該特定單元格獲取動物家族的名稱，找到具有該名稱的動物種類表，然后從display：none切換為display：block並將其顯示在div內。 然后，如果我再次單擊該按鈕，它將把顯示切換回顯示：無。

當我單擊另一個單元格中的按鈕時，它將清除div並顯示新表。

都好。

但是，如果我單擊以前使用的按鈕，那么現在消失的表將不再可用。

我經歷了各種與removeChild一起玩的籃球，所有這些都沒有運氣。 我目前正在使用innerHTML清除div，但缺少類名。

控制台錯誤說：tabletest2.html：523未捕獲的TypeError：在HTMLButtonElement.onclick（tabletest2.html：72）處切換（tabletest2.html：523）時無法讀取null的屬性'classList'

因此，在我看來，它不能再切換，因為該表現在已不存在，或者由於我沒有刪除子元素（我認為），我對此可能是錯誤的。

     <body>
<table>
  <tbody>
    <tr>
      <td>Genus</td>
      <td>Benthobatis
        <button onclick="toggle(this, parentNode.firstChild)">Click me</button></td>
    </tr>
    <tr>
      <td>Genus</td>
      <td>Diplobatis
        <button onclick="toggle(this, parentNode.firstChild)">Click me</button></td>
    </tr>
  </tbody>
</table>
<!-- <======== div display container here ================>-->  
<div id="tableContainer"></div>

     <table id="Benthobatis" class="hide">
    <tbody>
      <tr>
        <th>Genus</th>
        <th>Benthobatis</th>
      </tr>
      <tr>
        <td>Benthobatis kreffti</td>
        <td>Brazilian Blind Electric Ray</td>
      </tr>
    </tbody>
  </table>
    <!-- <==================================-->
     <table id="Diplobatis" class="hide">
    <tbody>
      <tr>
        <th>Genus</th>
        <th> Diplobatis </th>
      </tr>
      <tr>
        <td>Diplobatis colombiensis</td>
        <td>Colombian electric ray</td>
      </tr>
    </tbody>
  </table>
    </body>

    <script>
function toggle(ele, tableName) {
var myTableDisplayDiv = document.getElementById("tableContainer").childNodes;
    if (myTableDisplayDiv.length != 0) {
        document.getElementById("tableContainer").innerHTML = "";
    }
        var myTableName = tableName.textContent;
        var myTable = document.getElementById(myTableName);
        myTable.classList.toggle("hide");
        document.getElementById("tableContainer").appendChild(
        document.getElementById(myTableName)        
            );
    }   

      </script>


    <style>
          .hide  {
display: none;
    }

Answer 1

說明

“如果僅更改顯示選項而不刪除子節點，為什么刪除我的表？”。

這會破壞其中的所有內容：

 document.getElementById("tableContainer").innerHTML = "";

這會將所選表移至#tableContainer ：

 document.getElementById("tableContainer").appendChild( document.getElementById(myTableName)

因此，只需單擊三下，就什么都沒有了。 當然，這是可以正確識別該表的原因。 該.textContent的.parentNode.firstChild參考丟失，因為this是指全球范圍內沒有按鈕。 這就是為什么不鼓勵事件屬性（以及其他各種原因）的原因。 盡管這不是前面提到的關鍵問題，但您應該認真對名稱進行一些更改：

tableName myTableName myTable myTableDisplayDiv tableContainer

我很確定這種命名方案不會促進調試。

解決方案

將表格放到#tableContainer中銷毀之前，請使用.cloneNode()進行復制。
刪除onclick屬性，並使用onclick屬性（如在演示中）或.addEventListener() 。
注冊兩個按鈕的祖先元素（即tbody ），從那里可以單擊兩個按鈕，並可以使用event.target輕松地將其隔離和引用。
現在可以引用對單擊按鈕的引用（ event.target ）：

 var tableName = event.target.parentNode.firstChild.textContent

然后可以最終引用該表：

 var table = document.getElementById(tableName)

演示

 document.querySelector('tbody').onclick = toggle; function toggle(event) { var clicked = event.target; if (clicked.tagName === 'BUTTON') { var genus = clicked.parentNode.firstChild.textContent; var table = document.querySelector('#' + genus); var display = document.getElementById("display"); display.innerHTML = ""; var clone = table.cloneNode(true); display.appendChild(clone); clone.classList.toggle('hide'); } }

 .hide { display: none; }

 <table> <tbody> <tr> <td>Genus</td> <td>Benthobatis <button>Click me</button></td> </tr> <tr> <td>Genus</td> <td>Diplobatis <button>Click me</button></td> </tr> </tbody> </table> <!-- <======== div display container here ================>--> <div id="display"></div> <table id="Benthobatis" class="hide"> <tbody> <tr> <th>Genus</th> <th>Benthobatis</th> </tr> <tr> <td>Benthobatis kreffti</td> <td>Brazilian Blind Electric Ray</td> </tr> </tbody> </table> <!-- <==================================--> <table id="Diplobatis" class="hide"> <tbody> <tr> <th>Genus</th> <th> Diplobatis </th> </tr> <tr> <td>Diplobatis colombiensis</td> <td>Colombian electric ray</td> </tr> </tbody> </table>

Answer 2

您的代碼很難理解，但是如果您只想切換表格，我認為這是最好的方法。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .hide { display: none; } </style> </head> <body> <div class="table-container"> <button class="toggle-btn">Click me</button> <table> <tr> <td>Genus</td> <td>Benthobatis</td> </tr> <tr> <td>Genus</td> <td>Diplobatis</td> </tr> </table> </div> <script> const table = document.querySelector('table'), btn = document.querySelector('.toggle-btn'); btn.addEventListener("click", () => { table.classList.toggle("hide") }) </script> </body> </html>

div中的元素從小就被刪除，但無法再次使用

問題描述

2 個解決方案

解決方案1
1 2019-01-14 02:56:32

說明

解決方案

演示

解決方案2
0 2019-01-13 21:54:08

div中的元素從小就被刪除，但無法再次使用

問題描述

2 個解決方案

解決方案1 1 2019-01-14 02:56:32

說明

解決方案

演示

解決方案2 0 2019-01-13 21:54:08

解決方案1
1 2019-01-14 02:56:32

解決方案2
0 2019-01-13 21:54:08