Fatal编程技术网
  • javascript/
  • Javascript div中的元素作为子元素被删除，但可以'；不要再使用了

Javascript div中的元素作为子元素被删除，但可以'；不要再使用了

javascript

Javascript div中的元素作为子元素被删除，但可以'；不要再使用了,javascript,Javascript,我试图在div中显示一个隐藏的表，然后使用display:none/block切换再次隐藏它。它起作用了。但是，一旦切换到显示，我就无法让它再次显示：无可隐藏它 HTML: HTML有一个id为tableContainer的空div 在它旁边，我有一个表格，每个单元格中都有动物家族的名字，还有一个按钮。单击按钮时，它会从该特定单元格中获取动物家族的名称，查找具有该名称的动物物种表，并从display:none切换到display:block并在div内显示。然后，如果再次单击按钮，它会将显示切换

我试图在div中显示一个隐藏的表，然后使用display:none/block切换再次隐藏它。它起作用了。但是，一旦切换到显示，我就无法让它再次显示：无可隐藏它

HTML: HTML有一个id为tableContainer的空div

在它旁边，我有一个表格，每个单元格中都有动物家族的名字，还有一个按钮。单击按钮时，它会从该特定单元格中获取动物家族的名称，查找具有该名称的动物物种表，并从display:none切换到display:block并在div内显示。然后，如果再次单击按钮，它会将显示切换回display:none

当我单击另一个单元格中的按钮时，它将清除div并显示新表

一切都好

但是，如果我单击以前使用过的按钮，则现在使用过的表将不再可用

我和removeChild玩过各种各样的游戏，但没有运气。我目前正在使用innerHTML清除div，但缺少类名

控制台错误显示：tabletest2.html:523未捕获类型错误：无法读取null的属性“classList” at切换（tabletest2.html:523） 在HTMLButtonElement.onclick（tabletest2.html:72）

所以，在我看来，它不能再切换了，因为表现在已经不存在了，或者我可能错了，因为我没有删除子元素（我想）


属
底栖动物
点击我
属
双叶肌
点击我
属
底栖动物
克雷夫蒂底栖动物
巴西盲电射线
属
双叶肌
哥伦比亚双叶虫
哥伦比亚电射线
函数切换（元素、表名）{
var myTableDisplayDiv=document.getElementById（“tableContainer”）.childNodes；
如果（myTableDisplayDiv.length！=0）{
document.getElementById（“tableContainer”）.innerHTML=“”；
}
var myTableName=tableName.textContent；
var myTable=document.getElementById（myTableName）；
myTable.classList.toggle（“隐藏”）；
document.getElementById（“tableContainer”）.appendChild(
document.getElementById（myTableName）
);
}   
.隐藏{
显示：无；
}
您的代码理解起来有点复杂，但如果您只是想切换表，我认为这是最好的方法


文件
.隐藏{
显示：无；
}
点击我
属
底栖动物
属
双叶肌
const table=document.querySelector（'table'），
btn=document.querySelector（'.toggle btn'）；
btn.addEventListener（“单击”，（）=>{
table.classList.toggle（“隐藏”）
})
说明 “如果我只是更改显示选项，而不是删除子节点，为什么要删除我的表？”

这摧毁了里面的一切：

此将所选表格移动到
#tableContainer
：

三次点击后什么都没有了。当然，这是如果表格能够正确识别，而它不是。
.parentNode.firstChild的
.textContent
引用丢失，因为
此
引用的是全局上下文，而不是按钮。这就是为什么不鼓励使用事件属性（以及其他各种原因）。虽然不像前面提到的那样是一个关键问题，但您应该认真对待名称的一些变化：


tableName


myTableName


myTable


myTableDisplayDiv


tableContainer

我很确定这个命名方案不利于调试



解决

    

  • 在将表格放入被销毁的
    #tableContainer
    中之前，请使用
    .cloneNode（）
    进行复制
    • 

  • 删除
    onclick
    属性，然后使用
    onclick
    属性（如演示中所示）或
    .addEventListener（）
    • 

  • 注册两个按钮的祖先元素（即
    tbody
    ），从那里可以单击两个按钮，并使用
    event.target
    轻松隔离和引用
    • 

  • 现在可以引用对单击按钮（
    event.target
    ）的引用：
    • 



    

  • 然后最终可以引用该表：
    • 




演示


document.querySelector（'tbody'）.onclick=toggle；
功能切换（事件）{
var=event.target；
如果（单击）。标记名==='按钮'）{
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.classList.toggle（'hide'）；
}
}


.hide{
显示：无；
}



属
底栖动物
点击我
属
双叶肌
点击我
属
底栖动物
克雷夫蒂底栖动物
巴西盲电射线
属
双叶肌
哥伦比亚双叶虫
哥伦比亚电射线

哪个元素是
#tableContainer
？我假设从
？tableContainer向上一级是我放置表的空div。所以它是html:body:tableContainer。这些表与tableContainer位于同一级别/层次结构上，但在单击按钮时会切换到div。谢谢，但问题不在于切换。切换可以工作，但只有一次。在那之后，控制台中的错误似乎在暗示

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



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



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



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



var table = document.getElementById(tableName)