Question

所以，我有以下情况。如下图所示，我在左侧有一个表格，每一行都与另一个整个表格相关联。在右侧，我仅尝试显示与单击的行相关的表。

我用现在得到的超凡效果制作了一个codepen（使用香草javascript），但没有醒来，我不认为这是最好的解决方案。

Javascript：

function funcao(idd){
  let id = parseInt(idd)
  let filhas = document.getElementById("info").
                querySelectorAll(".filha")

  for(var i = 0; i < filhas.length; i++){
    if(i === id){
      console.log("block");
      filhas[id].style.display = "block";
    }
    else{
      console.log("none");
      filhas[id].style.display = "none";
    }
  }

}

HTML：

<div id="root">
  <table>
    <tr>
      <th>Nome</th>
      <th>Numero</th>
    </tr>
    <tr onclick="funcao(0)">
      <td>wally</td>
      <td>123</td>
    </tr>
    <tr onclick="funcao(1)">  
      <td>nada</td>
      <td>321</td>
    </tr>
  </table>

  <div id='info'>
    <table  class='filha' id='0' style='width: 100%;'>
    <tr>
      <th>Idade</th>
      <th>CPF</th>
    </tr>
    <tr>
      <td>2</td>
      <td>45644654</td>
    </tr>
    <tr>
      <td>10</td>
      <td>121321321</td>
    </tr>
  </table>

    <table class='filha' id='1' style='width: 100%;'>
    <tr>
      <th>Idade</th>
      <th>CPF</th>
    </tr>
    <tr>
      <td>25</td>
      <td>45644654</td>
    </tr>
    <tr>
      <td>10</td>
      <td>121321321</td>
    </tr>
  </table>    
  </div>
</div>

Answer 1

您的推理没问题，您在funcao函数中只有一个错误：您应该更改filhas[i]的样式，而不是filhas[id]。即：

function funcao(idd){
  let id = parseInt(idd)
  let filhas = document.getElementById("info").
                querySelectorAll(".filha")

  for(var i = 0; i < filhas.length; i++){
    if(i === id){
      console.log("block");
      filhas[i].style.display = "block";
    }
    else{
      console.log("none");
      filhas[i].style.display = "none";
    }
  }

}

我在您的Codepen上进行了测试，它似乎可以正常工作。

为避免循环，可以使用Array接口；我强烈建议您熟悉它。
在这种情况下，需要多加注意，因为方法querySelectorAll不会返回Array，而是返回一个NodeList，尽管它是一种相似但又不同的对象。 CFR。 https://gomakethings.com/converting-a-nodelist-to-an-array-with-vanilla-javascript/。
幸运的是，Array.from方法允许轻松从NodeList中获取一个数组。

我们有：

function funcao(idd) {
    let id = parseInt(idd)
    let filhas = document.getElementById("info").
        querySelectorAll(".filha")
    const filhaAtual = Array.from(filhas).find(filha => filha.style.display === "block")
    if (filhaAtual) filhaAtual.style.display = "none"
    filhas[id].style.display = "block";
}

Array中的find方法允许获取满足条件的第一个元素。如果没有元素满足条件，则返回undefined。
因此，如果确实存在隐藏的显示行，那么新版本将使用find获取先前显示的行，并最终显示索引到id的行。

希望有帮助-卡洛斯（Carlos）

如果ID相符则显示元素

1 个答案: