Question

The table has over hundred rows. I have already have a link that looks like this:

<a href="javascript:teamviewerconnect('78978978')"><img src="http://internaleservername:2323/img/remote_small.png" alt="remote connection icon" border="0"></a>

What I would like to do is have a DIV open in the middle of the screen on top of everything displaying data that is in a variable that I have per row. I could create a div per row that is hidden but all the solutions I have found to show/hide a div on a click are reliant on the div id being unique. I am not sure if this is possible but the link above can’t change but can we get it to display automatically when that link is clicked without having to click another show/hide?

Any help would be much appreciated

Answer 1

First, to do the display of the div it sounds to me like you would be well-served with a jQuery dialog (or whatever JS framework you prefer). Other users have answered with was to display the div without jQuery. You can easily center this on the page.

Then you’ll want to add an onClick event handler to each link, using code like @Gaby has posted (which uses jQuery)

Inside the event handler function, as @Treemonkey pointed out, you can grab your extra data by pulling it out of $(this)

$('a[href|="teamviewerconnect"]').click(function(){
   //Get whatever data you need like
   var idNumber = $(this).attr('href').split("'")[1];
   //Use that data to update the HTML of your div if needed, or do an ajax query here
   $('#mydialogdivid').html('<p>Blah Blah Blah ' + idNumber);
   $('#mydialogdivid').dialog();
});