Call function when a table row is clicked

Please let me know how I can call a function when a row in a table is clicked. The function accepts the row number as a parameter.

Thanks!
dshrenikAsked:
Who is Participating?
 
GwynforWebConnect With a Mentor Commented:
try this

<table id="myTable" border="1" width="309" height="166">
  <tr>
    <td width="154" height="55">0</td>
    <td width="155" height="55">0</td>
  </tr>
  <tr>
    <td width="154" height="55">1</td>
    <td width="155" height="55">1</td>
  </tr>
  <tr>
    <td width="154" height="56">2</td>
    <td width="155" height="56">2</td>
  </tr>
</table>


<p><input type="button" value="click me"
onclick="document.getElementById('myTable').rows[1].onclick=function (){alert('hello world')}">
0
 
dshrenikAuthor Commented:
I want the function to be called when the user clicks anywhere on the row, not a specific button. Thanks!
0
 
leakim971PluritechnicianCommented:
test page : http://jsfiddle.net/aPqyj/1/
window.onload = function() {
    var rows = document.getElementById("myTable").getElementsByTagName("tr");
    for(var i=0;i<rows.length;i++) rows[i].onclick = new Function("myfunction(" + i + ")");
}
    function myfunction(n) {
alert("you click on row number " + n);                
    }
¿

Open in new window

0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
dshrenikAuthor Commented:
If I have already defined the function as "functionA()" elsewhere in the code, please let me know how I can use that. Thanks!
0
 
leakim971Connect With a Mentor PluritechnicianCommented:
window.onload = function() {
    var rows = document.getElementById("myTable").getElementsByTagName("tr");
    for(var i=0;i<rows.length;i++) rows[i].onclick = new Function("functionA(" + i + ")");
}

Open in new window

0
 
dshrenikAuthor Commented:
Thanks! Does this work only with window.onload?
What if I create my table dynamically?
0
 
leakim971PluritechnicianCommented:
>What if I create my table dynamically?

run the code inside window.onload function immediately after you create it and append it to the page
0
 
GwynforWebCommented:
dshrenik

My example shows you how to set the row to be clickable.

(1) when page opened the the middle row is not clickable

(2) Press the button and the row in now clickable. and alerts "hello world"

I am trying to illustrating the principle of how to set a row to be clickable , I am not suggesting you have a button in your application.

Basically the statement

document.getElementById('myTable').rows[1].onclick=function (){alert('hello world')}"

will set the row to be clickable. It is up to you where you put it.
0
 
GwynforWebCommented:
...wow
0
 
dshrenikAuthor Commented:
@ GwynforWeb:
Sorry about that.

If leakim971 does not have a problem, I will reopen the question and share the points.
0
 
leakim971PluritechnicianCommented:
np
0
 
GwynforWebCommented:
@dshrenik, That is very kind of you, and you leakim971 as well.
0
 
dshrenikAuthor Commented:
0
 
GwynforWebCommented:
ty so much appreciated.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.