如何定位我單擊的表格行中每個單元格的內部 html？

Question

我正在嘗試在我的網站上創建一個函數，以便用戶可以單擊該表特定行上的“保存”按鈕，該按鈕將拉出他們選擇的整個行元素的 innerHtml，然后我將把該信息進入另一個頁面，作為他們保存的遠足路徑。

我一直在嘗試通過向表格添加點擊事件偵聽器然后通過目標訪問表格行的信息來做到這一點。

有誰知道我如何訪問整行的內部 html 而不僅僅是保存按鈕所在的單元格？

這是我的html：

<table class="table">
            <tr>
              <th>Trails</th>
              <th>Province</th>
              <th>Country</th>
            </tr>
            <tr>
              <td class="tableRow">Lion's Head</td>
              <td class="tableRow">Western Cape</td>
              <td class="tableRow">South Africa<button id="save" class="save">Save</button></td>
            </tr>
            <tr>
              <td class="tableRow">Pipe Track</td>
              <td class="tableRow">Western Cape</td>
              <td class="tableRow">South Africa<button id="save" class="save">Save</button></td>
            </tr>
            <tr>
              <td class="tableRow">Skeleton Gorge</td>
              <td class="tableRow">Western Cape</td>
              <td class="tableRow">South Africa<button id="save" class="save">Save</button></td>
            </tr>
            <tr>
              <td class="tableRow">Table Mountain</td>
              <td class="tableRow">Western Cape</td>
              <td class="tableRow">South Africa<button id="save" class="save">Save</button></td>
            </tr>
            <tr>
              <td class="tableRow">King Fisher Trail</td>
              <td class="tableRow">Western Cape</td>
              <td class="tableRow">South Africa<button id="save" button class="save">Save</button></td>
            </tr>
            <tr>
              <td class="tableRow">Robberg Peninsula</td>
              <td class="tableRow">Western Cape</td>
              <td class="tableRow">South Africa<button id="save" class="save">Save</button></td>
            </tr>
            <tr>
              <td class="tableRow">Diep Walle Forest Walk</td>
              <td class="tableRow">Western Cape</td>
              <td class="tableRow">South Africa<button id="save" class="save">Save</button></td>
            </tr>
          </table>

這是我試圖用來定位我需要的行的javascript。

const save = document.querySelector(".save");
console.log(save);

save.addEventListener("click", (e) => {
  let row = document.getElementsByClassName("tableRow");
  console.log(row[1], row[2], row[3]);
});

此 javascript 未針對正確的表格單元格。

Answer 1

您的頁面中不能有多個id="save"的元素 -每個文檔的 id 在任何時候都必須是唯一的。 對於多個元素，請改用一個類。

話雖如此，使用event.target.closest從委托偵聽器中查找行（也就是說，您將單擊偵聽器安裝在祖先元素上並利用事件的冒泡機制）。 這樣你也只需要一個聽眾。

 const table = document.getElementById('myTable'); table.addEventListener("click", (event) => { if (event.target.matches('button.save')) { const row = event.target.closest('tr'); console.log(row.innerText); } });

 <table class="table" id="myTable"> <thead> <tr> <th>Trails</th> <th>Province</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td class="tableRow">Lion's Head</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button class="save">Save</button></td> </tr> <tr> <td class="tableRow">Pipe Track</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button class="save">Save</button></td> </tr> <tr> <td class="tableRow">Skeleton Gorge</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button class="save">Save</button></td> </tr> <tr> <td class="tableRow">Table Mountain</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button class="save">Save</button></td> </tr> <tr> <td class="tableRow">King Fisher Trail</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button button class="save">Save</button></td> </tr> <tr> <td class="tableRow">Robberg Peninsula</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button class="save">Save</button></td> </tr> <tr> <td class="tableRow">Diep Walle Forest Walk</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button class="save">Save</button></td> </tr> </tbody> </table>

Answer 2

您不能為 DOM 中的不同元素提供相同的 id，但您可以創建自定義屬性。 我為每個按鈕創建了button-id 。 然后用它來獲取被點擊的行。

 const save = document.querySelectorAll(".save"); // select all the buttons const rows = document.querySelectorAll("tr") // select all the rows console.log(rows) save.forEach((btn) => { btn.addEventListener("click", (e) => { let id = e.target.getAttribute('button-id') // get the clicked buttons id console.log(id) console.log(rows[id]) // with id select the row }); })

 <table class="table"> <tr> <th>Trails</th> <th>Province</th> <th>Country</th> </tr> <tr> <td class="tableRow">Lion's Head</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button button-id="1" class="save">Save</button></td> </tr> <tr> <td class="tableRow">Pipe Track</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button button-id="2" class="save">Save</button></td> </tr> <tr> <td class="tableRow">Skeleton Gorge</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button button-id="3" class="save">Save</button></td> </tr> <tr> <td class="tableRow">Table Mountain</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button button-id="4" class="save">Save</button></td> </tr> <tr> <td class="tableRow">King Fisher Trail</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button button-id="5" button class="save">Save</button></td> </tr> <tr> <td class="tableRow">Robberg Peninsula</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button button-id="6" class="save">Save</button></td> </tr> <tr> <td class="tableRow">Diep Walle Forest Walk</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button button-id="7" class="save">Save</button></td> </tr> </table>

Answer 3

首先，您必須將 eventListener 分配給所有保存按鈕。 通過單擊觸發后，您可以使用 event.target 函數訪問它。 然后你可以向上到父元素tr 。 之后，您可以處理 tr 元素。

注意最好使用event.target.closest('tr')以避免將來發生一些沖突。 如果代碼中會發生相同的更改。 請參閱@connexo 的評論

 const save = document.querySelectorAll(".save"); save.forEach(s => { s.addEventListener("click", (e) => { const row = e.target.parentNode.parentNode; row.classList.toggle('border'); console.log(row) // }); });

 .border { background: red; }

 <table class="table"> <tr> <th>Trails</th> <th>Province</th> <th>Country</th> </tr> <tr> <td class="tableRow">Lion's Head</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button id="save" class="save">Save</button></td> </tr> <tr> <td class="tableRow">Pipe Track</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button id="save" class="save">Save</button></td> </tr> <tr> <td class="tableRow">Skeleton Gorge</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button id="save" class="save">Save</button></td> </tr> <tr> <td class="tableRow">Table Mountain</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button id="save" class="save">Save</button></td> </tr> <tr> <td class="tableRow">King Fisher Trail</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button id="save" button class="save">Save</button></td> </tr> <tr> <td class="tableRow">Robberg Peninsula</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button id="save" class="save">Save</button></td> </tr> <tr> <td class="tableRow">Diep Walle Forest Walk</td> <td class="tableRow">Western Cape</td> <td class="tableRow">South Africa<button id="save" class="save">Save</button></td> </tr> </table>