單擊表格中的行以從子元素獲取資訊-有解無憂

我有一個使用陣列中的資料生成的表（該陣列包含的資訊比表中顯示的資訊多）。我想單擊一行以查看元素中的所有資訊。

之前這樣做是這樣的：

let rows = document.getElementsByTagName("tr");

 for (let row of rows) {
        row.onclick = function rowClicked(evt) {
        selected = myArray[evt.target.parentElement.rowIndex];
        //code (not relevant)
        }

但是由于我添加的搜索功能myArray[1]不一定等于第 1 行，所以這種方法不起作用。

通過單擊隨機行來查找陣列中元素的另一種方法是什么？

該表是這樣生成的：

function drawTable(data) {
    let table = document.getElementById("table");
    table.innerHTML = "";

    let tableHead = document.createElement("thead");
    let colHeads = ["Names"];

    for (let header of colHeads) {
        let cell = document.createElement("th")
        cell.innerHTML = header;
        tableHead.appendChild(cell);
    }
    table.appendChild(tableHead)

    for (var i = 0; i < data.length; i  ){

        let row = document.createElement("tr");

        let name = document.createElement("td");
        name.innerHTML = data[i].name.first   "&nbsp"   data[i].name.last;
        row.appendChild(name);

        table.appendChild(row);
    }
}

任何幫助是極大的贊賞！

uj5u.com熱心網友回復：

您需要某種方法將表行映射到其相關條目，myArray其中不依賴于表中行的位置。資料屬性不會受到影響。

在每個表行上創建一個data-index屬性。然后，當它被點擊時，使用data-index屬性的值來訪問相關myArray條目。

uj5u.com熱心網友回復：

您的想法的簡單版本。可見線與單擊事件系結。一旦它被觸發，它就會從單擊的元素中獲取 ref-id 并切換參考列。

const clickables = document.querySelectorAll('.clickable');
console.log(clickables)

clickables.forEach(tr => {
  tr.addEventListener('click', (e) => {    
    const ref = e.target.parentElement.getAttribute('data-ref');
    const row = document.querySelector('#'   ref);
    row.classList.toggle('hide');    
  });
});

td {
  text-align: center;
  padding: 20px;
}

.hide {
  display: none;
}

.clickable {
  cursor: pointer;
}
.clickable:hover {
  background: #ccc;
}

<table border="1">
  <tr class="clickable" data-ref="a">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr id="a" class="hide">
    <td>a1</td>
    <td>b2</td>
  </tr>  
  
  <tr class="clickable" data-ref="b">
    <td>3</td>
    <td>4</td>
  </tr>
  <tr id="b" class="hide">
    <td>a3</td>
    <td>a4</td>
  </tr>    
</table>

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

標籤：

上一篇：如何在javascript中拆分并得到對數小數點后6位？

下一篇：使用jqueryajax洗掉專案