Getting the cell data from the HTML Table using Java script upon pressing Edit button

Question

I created a HTML table and populated with the values from the database. Now i wanna create edit functionality to this table.I added Edit button to each row of the table. I need to know the corresponding rowID upon pressing the relevant edit button.I am using java script to get the ID of the row but unfortunately i was getting only details of First row. I guess i need to put some for loop. I need this ID to pass another page so that it populates the values of that corresponding entries and user can edit the entries and save them.

(I am developing in dotnet but i dont wanna use any gridview control to do this).

Please send me any sample code or solution if you have.

<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

Your code is not working because what the test method does is:
- Get the first element whose id is listing
- Get all elements with tag name td inside listings
- Show first td's innerText

What you want to do is:
- In the click event, get the row for which the button was clicked
- Display the data of the row