Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 356
  • Last Modified:

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!
0
dshrenik
Asked:
dshrenik
  • 5
  • 5
  • 4
2 Solutions
 
GwynforWebCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
leakim971PluritechnicianCommented:
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now