473,324 Members | 2,179 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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

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
4 1661
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: loga123 | last post by:
Hi All, I am very new to .net and trying to develop a small application. I am using asp .net 2.0. I have a table control (server) in my code that has header row like this. <asp:Table...
16
by: Ian Davies | last post by:
Hello Needing help with a suitable solution. I have extracted records into a table under three columns 'category', 'comment' and share (the category column also holds the index no of the record...
1
by: dave | last post by:
I have a html table and mutliple rows. On each row i put an onclick event that opesn a modal window and prompts the user for some information. I want this modal window to show when the user...
3
by: Man4ish | last post by:
I am trying to create a table with three columns. first two columns will be having text values while last column has checkbox. How it can implemented? Any example doing the same will really help me....
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.