get row number in table

Roderik · Nov 2, 2004

Hi,

I have a table like this:

<table id="myTable">
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
...
<tr><td>text</td><td>text</td></tr>
</table>

Now I want to add a javascript to the page that informs me of which row
I have clicked. If I click the second row it should fire an alert with
"You clicked row: 2". I don't want to add javascript inside the html of
the table.

Regards,

Roderik

Michael Winter · Nov 2, 2004

[snip]

Now I want to add a javascript to the page that informs me of which row
I have clicked.

That's fairly simple. The code below adds a click event listener to each
row in the "myTable" table. If the user clicks anywhere inside a row, the
click event will "bubble up" to the containing row.

If I click the second row it should fire an alert with "You clicked row:
2".

Just to point out: the rowIndex property used in the showRowNum() inner
function yields a zero-order index. That is, the second row will have the
index number, 1, hence the "+1" in the code.

I don't want to add javascript inside the html of the table.

That's OK. Call addRowListeners once the table has been parsed, either in
a SCRIPT element placed after the closing TABLE tag or, as in this
example, once the document has loaded.

function addRowListeners() {
/* Use this function as a common event listener for each row. */
function showRowNum() {
/* Check that the rowIndex property is
* supported before trying to use it.
*/
if('number' == typeof this.rowIndex) {
alert('You clicked row: ' + (this.rowIndex + 1));
}
}
/* Check that the getElementById method is
* supported before trying to use it.
*/
if(document.getElementById) {
/* Change the string, 'myTable', to reflect the actual id. */
var table = document.getElementById('myTable'), rows;
/* Ensure a reference was obtained and
* that we can access the rows.
*/
if(table && (rows = table.rows)) {
/* Add the listener to each row in the table. */
for(var i = 0, n = rows.length; i < n; ++i) {
rows.onclick = showRowNum;
}
}
}
}

<body ... onload="addRowListeners();">

Untested, but should work. Hope it helps,
Mike

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Sort by number of characters	1	Nov 2, 2023
Javascript DOM	1	Mar 29, 2023
Getting extra blank rows from appending HTML..?	2	Oct 24, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery?	4	Sep 29, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value?	7	Aug 22, 2023

get row number in table

Roderik

Michael Winter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads