By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,983 Members | 2,049 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,983 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Jan 23 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Stefan Mueller wrote:
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;

Jan 23 '06 #2

P: n/a
Stefan Mueller wrote:
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));">
--
Rob
Jan 23 '06 #3

P: n/a
Joe Attardi wrote:
Stefan Mueller wrote:
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.


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.
[...]
--
Rob
Jan 24 '06 #4

P: n/a
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
Jan 26 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.