Retrieve table row number when clicked

decomplexity · Feb 25, 2012

I want to display an HTML table of items for auction (one item per row) that people can bid for. The rightmost cell in each row will contain a BID NOW link or button.
When someone clicks BID NOW, what please is the easiest way to identify the relevant row number (so that I can then retrieve into a Javascript array the contents of that row)

The document.getElementById('<tablename>').rows[<n>].cells appears to allow me to select the contents of row[n], but how do I identify which row ['n'] has been selected as a result of the onclick event?

vacunita · Feb 26, 2012

I would probably just store the contents in an array to begin with and have the link have the row number embedded into it.

alternatively you could simply traverse the DOm upwards using the parentNode properties to get the relevant row.

Assuming you are using the link's onclick event to execute a function just pass the links parent's parent obj to the function to access the row the link is in.

For example here, when you click any row of the table you'll get its contents alerted.

Code:

<html>
<head><title>Table Rows</title>
<script type="text/javascript">
function getRow(cellObj){
alert(cellObj.parentNode.innerHTML);

}
</script>
</head>
<body>

<table>
<tr><td onclick="getRow(this);">Row 1 Cell 1 </td><td onclick="getRow(this);">Row 1 Cell 2</td></tr>
<tr><td onclick="getRow(this);">Row 2 Cell 1 </td><td onclick="getRow(this);">Row 2 Cell 2</td></tr>
<tr><td onclick="getRow(this);">Row 3 Cell 1 </td><td onclick="getRow(this);">Row 3 Cell 2</td></tr>
<tr><td onclick="getRow(this);">Row 4 Cell 1 </td><td onclick="getRow(this);">Row 4 Cell 2</td></tr>
</table>
</body>
</html>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Retrieve table row number when clicked

decomplexity

IS-IT--Management

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor