Блог

Итак, у меня следующая ситуация. Как показано на рисунке ниже, у меня есть таблица слева, каждая строка которой связана с другой целой таблицей. С правой стороны я пытаюсь показать только таблицу, связанную с выбранной строкой.

Я создал 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>
  

Ваши рассуждения в порядке, у вас просто ошибка в 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 возвращает не массив, а список узлов, который представляет собой другой, хотя и похожий, тип объекта. Cfr. https://gomakethings.com/converting-a-nodelist-to-an-array-with-vanilla-javascript /.
К счастью, Array.from метод позволяет легко получить массив из списка узлов.

У нас есть:

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

find Метод в массиве позволяет получить первый элемент, удовлетворяющий условию. Если ни один элемент не удовлетворяет условию, он возвращает undefined .
Следовательно, новая версия получает ранее показанную строку с помощью find , если действительно была показанная строка, скрывает ее и, наконец, показывает id -индексированную строку.

Надеюсь, это поможет — Carlos