按下“編輯”按鈕后，使用Java腳本從HTML表中獲取單元格數據

Question

我創建了一個HTML表，並填充了數據庫中的值。 現在我想為該表創建編輯功能。我向表的每一行添加了“編輯”按鈕。 我需要在按下相關的編輯按鈕后知道相應的rowID。我正在使用Java腳本來獲取該行的ID，但不幸的是，我僅獲得了第一行的詳細信息。 我想我需要把一些循環。 我需要此ID來傳遞另一個頁面，以便它填充相應條目的值，並且用戶可以編輯條目並保存它們。

（我在dotnet中進行開發，但我不想使用任何gridview控件來執行此操作）。

如果有的話，請給我發送任何示例代碼或解決方案。

<tr id= "listings">
    <td style="width:16%; vertical-align:top; border-bottom: solid 1px black;" id = "ids">@@P.ID@@</td>
    <td style="width:16%; vertical-align:top; border-bottom: solid 1px black; text-align:right;">@@P.NAME@@</td>
    <td style="width:2%; vertical-align:top; border-bottom: solid 1px black; text-align:right;">&nbsp;&nbsp;</td>
    <td style="width:16%; vertical-align:top; border-bottom: solid 1px black;">@@P.DESCRIPTION@@</td>
    <td style="width:16%; vertical-align:top; border-bottom: solid 1px black;">@@P.DATEAPPROVED@@</td>
    <td style="width:16%; vertical-align:top; border-bottom: solid 1px black; text-align:right;">@@P.TOTALCOST@@</td>
    <td style="width:2%; vertical-align:top; border-bottom: solid 1px black; text-align:right;">&nbsp;</td>
    <td style="width:16%; vertical-align:top; border-bottom: solid 1px black; text-align:right;">
    <button name = "editButton" type = "button" value = "Edit" onclick="test()">
    Edit
    </button>

    </td>

    </tr>

<script type="text/javascript">
    function test() {
        var elTableRow = document.getElementById("listings");
        var elTableCells = elTableRow.getElementsByTagName("td");
        alert(elTableCells[0].innerText);
 }    

</script>

Answer 1

您的代碼無法正常工作，因為測試方法是：
-獲取ID為列表的第一個元素
-在列表中獲取標簽名稱為td的所有元素
-顯示第一個TD的innerText

您想要做的是：
-在click事件中，獲取單擊了按鈕的行
-顯示行數據