如何定位我單擊的表格行中每個單元格的內部html？-有解無憂

我正在嘗試在我的網站上創建一個函式，以便用戶可以單擊該表特定行上的“保存”按鈕，該按鈕將拉出他們選擇的整個行元素的 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 未針對正確的表格單元格。

任何建議表示贊賞！謝謝！

uj5u.com熱心網友回復：

您不能為 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>

uj5u.com熱心網友回復：

首先，您必須將 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>

uj5u.com熱心網友回復：

您的頁面中不能有多個元素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>

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

標籤：javascript html

上一篇：如何在JavaScript中實作函陣列合？

下一篇：只畫closePath()線