如何使第一列的每一行都可以單擊以從整行中獲取數據？ JavaScript

Question

我正在嘗試使表格的第一列的每一行（在本例中為訂單 ID）可點擊，以便我可以在我網站的另一個容器中顯示來自該特定訂單 ID 的更多信息。 我遍歷了一些 JSON 數據來創建這樣的表：

function printData(jsonData) {
    let myTable = document.getElementById("jsonTable")
    for(let i=0; i < jsonData.length; i++) {
        let row = `<tr>
                        <td>${jsonData[i].orderid}</td>
                        <td>${jsonData[i].customerid}</td>
                        <td>${jsonData[i].customer}</td>
                        <td>${jsonData[i].invaddr}</td>
                        <td>${jsonData[i].delivaddr}</td>
                        <td>${jsonData[i].deliverydate}</td>
                        <td>${jsonData[i].respsalesperson}</td></tr>`


            jsonTable.innerHTML += row
    }
}

這就是我的 HTML 文件的樣子：

        <div class="datatable">

            <div class="datatablecontent">
                <table class="jsontable">
                    <tr id="jsontr">
                        <th>Order ID</th>
                        <th>Customer ID</th>
                        <th>Customer</th>
                        <th>InvAddr</th>
                        <th>Delivery Address</th>
                        <th>Delivery Date</th>
                        <th>Resp. For Sale </th>
    
                        <tbody id="jsonTable">
    
                        </tbody>
                    </tr>
    
                </table>
            </div>
        </div>

Answer 1

在遍歷jsonData時，您可以在事件偵聽器中聲明回調。

因為您使用的是模板文字，所以我保持簡潔並傳遞行索引。 您還可以通過在 JS 中添加事件偵聽器來傳遞數據本身，為此您需要訪問該元素。

 function logRowData(index) { console.log(jsonData[index]) } let jsonData = [ {orderid: 0, customerid:14, customer: 'abc'}, {orderid: 1, customerid:25, customer: 'xyz'} ] printData(jsonData) function printData(jsonData) { let myTable = document.getElementById("jsonTable") for(let i=0; i < jsonData.length; i++) { let row = `<tr> <td onclick={logRowData(${i})}>${jsonData[i].orderid}</td> <td>${jsonData[i].customerid}</td> <td>${jsonData[i].customer}</td></tr>` jsonTable.innerHTML += row } }

 <div class="datatable"> <div class="datatablecontent"> <table class="jsontable"> <tr id="jsontr"> <th>Order ID</th> <th>Customer ID</th> <th>Customer</th> <tbody id="jsonTable"> </tbody> </tr> </table> </div> </div>