How to figure out on which row of a table I click e.g. a checkbox

[Stefan Mueller]

To following code/script shows me the row number of the checkbox I've just
clicked:

<form name = "my_form" action = "" method = "post" accept-charset =
"iso-8859-1">
<table name = "my_table" border = "1">
<tr>
<td>
<input type = "checkbox" onClick = "alert('Row 1');">
</td>
</tr>
<tr>
<td>
<input type = "checkbox" onClick = "alert('Row 2');">
</td>
</tr>
</table>
</form>

That works fine but I'd like to do it dynamically.

I tried
alert(document.my_form.my_table.row);
but it doesn't work (Error: document.my_form.my_table has no properties). I
think the problem is that <table> does not have a 'name' attribute.

I need this because I wrote some Java Scripts to sort a html table.
The data are visible on the screen (html table) and are also stored in an
array. If I click now on a checkbox I need to now which row of my array
'array[row]' I have to modify (modify the flag of the checkbox). That's the
reason I need to know on which row I've clicked the checkbox.

Does anyone know how I can get the row dynamically?
Stefan

 

[Joe Attardi]

Does anyone know how I can get the row dynamically?

The trick lies in the event object. Accessing it differs slightly
between IE and Firefox. In IE, you can access it with window.event. In
Mozilla/Firefox, the event gets passed as an argument to the event
handler.

Assuming the IE example, because it's a little simpler:

Once you have the event, you can get the source element:
clickedCheckbox = window.event.srcEvent;

From there, you can walk up the node tree using the parentNode

property.
In your example:
tableCell = clickedCheckbox.parentNode; // this is the td
tableRow = tableCell.parentNode; // this is the row

Or, to simplify the code into one line:
clickedRow = window.event.srcEvent.parentNode.parentNode;

 

[RobG]

To following code/script shows me the row number of the checkbox I've just
clicked:

<form name = "my_form" action = "" method = "post" accept-charset =
"iso-8859-1">
<table name = "my_table" border = "1">
<tr>
<td>
<input type = "checkbox" onClick = "alert('Row 1');">
</td>
</tr>
<tr>
<td>
<input type = "checkbox" onClick = "alert('Row 2');">
</td>
</tr>
</table>
</form>

That works fine but I'd like to do it dynamically.

I tried
alert(document.my_form.my_table.row);
but it doesn't work (Error: document.my_form.my_table has no properties). I
think the problem is that <table> does not have a 'name' attribute.

I need this because I wrote some Java Scripts to sort a html table.
The data are visible on the screen (html table) and are also stored in an
array. If I click now on a checkbox I need to now which row of my array
'array[row]' I have to modify (modify the flag of the checkbox). That's the
reason I need to know on which row I've clicked the checkbox.

Does anyone know how I can get the row dynamically?

Go up the DOM tree until you hit the first TR element.


function showRowIndex(el)
{
while (el.parentNode && 'tr' != el.nodeName.toLowerCase()){
el = el.parentNode;
}

// If found a TR parent, return its index
if ('tr' == el.nodeName.toLowerCase()) return el.rowIndex;

// Otherwise, el doesn't have a TR parent.
return "No TR parent";

}

Then on your checkbox:

<input type = "checkbox" onclick="alert(showRowIndex(this));">

 

[RobG]

The trick lies in the event object. Accessing it differs slightly
between IE and Firefox. In IE, you can access it with window.event. In
Mozilla/Firefox, the event gets passed as an argument to the event
handler.

Much simpler to use 'this' when calling the function to get a reference
directly to the element that fired the event.

Assuming the IE example, because it's a little simpler:

Not really, it's just different to the W3C model. If event is to be
used it's usually done like this:

<input type="checkbox" onclick="someFn(event);" ... >

function someFn(e)
{
var e = e || window.event;
var t = e.target || e.srcElement;
// t is the element that was clicked on
}


Now you have a reference to the element that was clicked on in browsers
that use either the W3C or IE event model. However, the element that
was clicked on may not be the element that fired the event, it may be a
decedent.

If you are really after the element that fired the event, that is not a
good way to get it.

Once you have the event, you can get the source element:
clickedCheckbox = window.event.srcEvent;

Simply pass 'this' from the checkbox in the first place:

<input type="checkbox" onclick="someFn(this);" ... >

function someFn(el)
{
// el is a reference to the checkbox that fired the event
}


No messing around with event models.


[...]

 

[Stefan Mueller]

Many thanks for your help and your hints.
Today I do it with

while ('TR' != this.nodeName.toUpperCase() ) {this = this.parentNode;}
alert (this.rowIndex);

Stefan