javascript - 切换可见性时添加到表中的第一项丢失

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>