Первый элемент, добавленный в таблицу, теряется при переключении видимости

Question

У меня есть функция, в которой строки добавляются из одной таблицы в другую, но я не хочу отображать строки во второй таблице, пока не будет добавлено как минимум 2.Однако когда я переключаю видимость в этой функции на «видимый», первая строка, добавленная пользователем, не отображается.

 const addToFavourites = rowData => {
    let faveRow = document.createElement("tr");

    faveRow.style.visibility='hidden'

    faveRow.innerHTML = 
   `${rowData.innerHTML
    }<td class='cell'><button type='button' 
    class='remove-btn'>Remove</button> . 
    </td>`;

    favesTable.appendChild(faveRow);

   if (favesTable.rows.length > 2) {
    faveRow.style.visibility='visible';
   } 
}

Answer 1

Причина в том, что вы устанавливаете видимость 3-го ряда только при нажатии на него.Переберите свои предыдущие строки, чтобы сделать их видимыми.Если вы проверите свою консоль в своем решении, вы увидите, что строка таблицы существует, но все еще имеет значение visibility: hidden, но вы не можете их видеть.

const favesTable = document.getElementById("favesTable");
const addToFavourites = rowData => {
  let faveRow = document.createElement("tr");

  faveRow.style.visibility='hidden'

  faveRow.innerHTML = 
   `${rowData.innerHTML
    }<td class='cell'><button type='button' 
    class='remove-btn'>Remove</button>
    </td>`;

  favesTable.appendChild(faveRow);

   if (favesTable.rows.length > 2) {
     for(var i = 0; i < favesTable.rows.length; i++) {
      favesTable.rows[i].style.visibility='visible';
     }
   } 
}

<table>
  <tr onclick="addToFavourites(this)"><td>Click this row1</td></tr>
  <tr onclick="addToFavourites(this)"><td>Click this row2</td></tr>
  <tr onclick="addToFavourites(this)"><td>Click this row3</td></tr>
</table>
<table id="favesTable"></table>