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

原因是您仅在单击第三行时设置了可见性。循环浏览先前的行以使其可见。如果您在解决方案中检查控制台，则会看到该表行存在，但仍设置为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>

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

1 个答案: