如何從表中洗掉特定行？-有解無憂

所以我正在創建一個網站，允許用戶輸入他們讀過的書籍的資訊，并將資訊輸入到一個表格中。但我希望用戶能夠在單擊按鈕時從表中洗掉特定行（書）。

我在洗掉按鈕中添加了一個點擊事件監聽器，但現在它只洗掉第 0 個索引處的行，有時它一次洗掉多行。我不確定為什么。

function addBooks() {
  let info = document.getElementById("author").value;
  let info2 = document.getElementById("title").value;
  let info3 = document.getElementById("genre").value;
  let info4 = document.getElementById("reviews").value;

  document.getElementById("author").value = "";
  document.getElementById("title").value = "";
  document.getElementById("genre").value = "";
  document.getElementById("reviews").value = "";

  let obj = {
    author: info,
    title: info2,
    genre: info3,
    review: info4,
  };

  let table = document.getElementById("table");

  const row = table.insertRow(1);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  cell1.innerHTML = `${obj.author}`;
  cell2.innerHTML = `${obj.title}`;
  cell3.innerHTML = `${obj.genre}`;
  cell4.innerHTML = `${obj.review}<button id="delete" >Delete Book</button>`;

  document.querySelectorAll(".delete").forEach((item) => {
    item.addEventListener("click", (event) => {
      document.getElementById("table").deleteRow(1);
    });
  });
}

<body>
  <div class="container">
    <h1 class="heading">Your Books</h1>

    <p class="subHeading">Author</p>
    <input id="author"></input>

    <p class="subHeading">Title</p>
    <input id="title"></input>

    <p class="subHeading">Genre</p>
    <input id="genre"></input>

    <p class="subHeading">Reviews</p>
    <input id="reviews"></input>

  </div>

  <button class="btn" onclick="addBooks()" id="button">Submit</button>


  <table id="table">
    <tr>
      <th>Author</th>
      <th>Title</th>
      <th>Genre</th>
      <th>Reviews</th>
    </tr>

  </table>

  <script src="books.js"></script>
</body>

因此 JavaScript 允許用戶向表中添加新的資訊行。但他們需要能夠在單擊特定行上的洗掉按鈕時洗掉特定行。

我已將事件偵聽器添加到洗掉按鈕，但回應按鈕單擊的功能僅洗掉第一行而不是單擊按鈕的行。

誰能解釋如何做到這一點？

uj5u.com熱心網友回復：

正如其他答案所證明的那樣，有很多方法可以洗掉該行。

您的代碼僅洗掉第一個條目的原因是因為您放置了deleteRow(1)，這意味著“洗掉索引 1 處的行”。由于索引 0 處的行是您的標題，因此索引 1 處的行是您的第一個條目。

它有時會洗掉所有內容的原因是因為您每次添加新書時都會添加事件偵聽器。添加第一本書時，洗掉按鈕將保留行索引 1 作為洗掉的參考。添加第二本書時，您將另一個事件偵聽器添加到同一個按鈕以洗掉您正在添加的新行。先前的參考現在位于索引 2。當您單擊該按鈕時，它將洗掉行以及索引 1 和 2。

這是使用您的代碼在 JavaScript 中執行此操作的另一種方法：

function addBooks() {
  let info = document.getElementById("author").value;
  let info2 = document.getElementById("title").value;
  let info3 = document.getElementById("genre").value;
  let info4 = document.getElementById("reviews").value;

  document.getElementById("author").value = "";
  document.getElementById("title").value = "";
  document.getElementById("genre").value = "";
  document.getElementById("reviews").value = "";

  let obj = {
    author: info,
    title: info2,
    genre: info3,
    review: info4,
  };

  let table = document.getElementById("table");

  const row = table.insertRow(1);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  var deleteButton = document.createElement('button');
  deleteButton.type = 'button';
  deleteButton.textContent = 'Delete Book';
  deleteButton.addEventListener('click', (event) => {
    var row = deleteButton.parentNode.parentNode;
    row.parentNode.removeChild(row)
  })
  
  cell1.innerHTML = `${obj.author}`;
  cell2.innerHTML = `${obj.title}`;
  cell3.innerHTML = `${obj.genre}`;
  cell4.innerHTML = `${obj.review}`;
  cell4.appendChild(deleteButton);
 
}

uj5u.com熱心網友回復：

首先，</input>不是一個有效的 HTML 標簽，你應該使用它<input type="..." />來代替。

洗掉表中的一行有很多解決方案，這里有一個。在click上button，您找到它最接近 tr的并洗掉它：

function addBooks() {
  let info = document.getElementById("author").value;
  let info2 = document.getElementById("title").value;
  let info3 = document.getElementById("genre").value;
  let info4 = document.getElementById("reviews").value;

  document.getElementById("author").value = "";
  document.getElementById("title").value = "";
  document.getElementById("genre").value = "";
  document.getElementById("reviews").value = "";

  let obj = {
    author: info,
    title: info2,
    genre: info3,
    review: info4,
  };

  let table = document.getElementById("table");

  const row = table.insertRow(1);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  cell1.innerHTML = `${obj.author}`;
  cell2.innerHTML = `${obj.title}`;
  cell3.innerHTML = `${obj.genre}`;
  cell4.innerHTML = `${obj.review}<button onclick="this.closest('tr').remove()">Delete Book</button>`;
}

<body>
  <div class="container">
    <h1 class="heading">Your Books</h1>
    
    <p class="subHeading">Author</p>
    <input type="text" id="author" />
    
    <p class="subHeading">Title</p>
    <input type="text" id="title" />
    
    <p class="subHeading">Genre</p>
    <input type="text" id="genre" />
    
    <p class="subHeading">Reviews</p>
    <input type="text" id="reviews" />
    
  </div>
  
  <button class="btn" onclick="addBooks()" id="button">Submit</button>
  
  
  <table id="table">
    <tr>
      <th>Author</th>
      <th>Title</th>
      <th>Genre</th>
      <th>Reviews</th>
    </tr>
    
  </table>
  
  <script src="books.js"></script>
</body>

uj5u.com熱心網友回復：

只需在您的按鈕上創建一個 onclick 并使用以下命令傳入其父元素this.parentElement：

cell4.innerHTML = `${obj.review}<button id="delete" class="delete" onclick="deleteBook(this.parentElement)">Delete Book</button>`;

然后，在函式中洗掉其父級：

function deleteBook(elem){
    elem.parentElement.removeChild(elem);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/437809.html

標籤：javascript html

上一篇：在ngFor中動態添加div容器？

下一篇：將橙色框和文本對齊到影像的右側