Solved

Call function when a table row is clicked

Posted on 2012-03-21
15
325 Views
Last Modified: 2012-03-25
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
Comment
Question by:dshrenik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 4
15 Comments
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 250 total points
ID: 37750337
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
 

Author Comment

by:dshrenik
ID: 37750350
I want the function to be called when the user clicks anywhere on the row, not a specific button. Thanks!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37750368
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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:dshrenik
ID: 37750377
If I have already defined the function as "functionA()" elsewhere in the code, please let me know how I can use that. Thanks!
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 37750388
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
 

Author Comment

by:dshrenik
ID: 37750391
Thanks! Does this work only with window.onload?
What if I create my table dynamically?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37750400
>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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 37750415
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 37750417
...wow
0
 

Author Comment

by:dshrenik
ID: 37750423
@ GwynforWeb:
Sorry about that.

If leakim971 does not have a problem, I will reopen the question and share the points.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37750429
np
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 37750442
@dshrenik, That is very kind of you, and you leakim971 as well.
0
 

Author Comment

by:dshrenik
ID: 37753865
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 37762853
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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question