按下“编辑”按钮后，使用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事件中，获取单击了按钮的行
-显示行数据