lire <td> puis popup charge lorsque vous cliquez dessus

Question

Je veux faire une ligne de table complètement cliquable en intégrant un cache <td> contenant un lien comme ceci:

<tr class="simplehighlight junk" > 
    <td>07/09/2011</td> 
    <td>Jennifer Woods Memorial GP</td> 
    <td>A52</td> 
    <td>Harris, Fred</td> 
    <td>1900</td> 
    <td>Nikolayev, Igor</td> 
    <td>2395</td> 
    <td class="text-center">0-1</td> 
    <td style='display:none;visibility:hidden;\'> games/game1242.php </td> 
</tr> 

j'utilisais colorbox pour cibler la cellule de table comme ceci:

<!--colorbox--> 
<script src="./js/jquery.colorbox-min.js"></script> 
<script> 
    $('tr.junk').colorbox(
    { 
     iframe:true, 
     transition:'elastic', 
     speed:'100', 
     width:1030, 
     height:550, 
     href: function(){ 
     return $(this).find('td').eq(8).text(); 
     } 
    } 
); 
</script> 

Mais je veux utiliser jquery:

<!--Another Pop-up for games table--> 
<script src="./js/jquery.popupWindow-min.js" ></script> 
<script> 
    $('.diagram-popup').popupWindow({centerBrowser:1, height:560, width:1024}); 
</script> 

Comment puis-je ajouter la classe diagram-popup à la cellule de données de la 8ème table et que la ligne, lorsqu'on clique dessus, lit le contenu de cette cellule?

Answer 1

<td class='diagram-popup' style='display:none;visibility:hidden;\'> games/game1242.php </td> 

$(document).ready(function(){ 
    $('.diagram-popup').click(function(){ 
     $(this).html(); //contents of cell 
    }); 
}); 

Est-ce ce que vous cherchez?

Mise à jour: Ah, je vois ... vous êtes désireux de cliquer sur une cellule de la ligne, puis aller chercher le contenu .. Peut-être que cela va aider ...

<td style='display:none;visibility:hidden;\'> games/game1242.php </td> 

$(document).ready(function(){ 
    $('table tr td').click(function(){ 
     var cell = $(this).parent().find('td:last'); 
     cell.addClass('diagram-popup'); //Not clear on if this is what you're wanting, you can always just print out the diagram-popup class server side 
     cell.html(); //contents of cell 
    }); 
}); 

refuge I T testé, mais ça devrait marcher.

Answer 2

Vous voulez ajouter une classe à votre ligne cliquable, je serais probablement changer la tr en question de lire quelque chose comme ceci:

<tr class="simplehighlight junk diagram-popup" data-href="games/game1242.php" > 

Et je complètement laisser tomber votre caché <td>, il est unecessary.

Et le jquery:

<script src="./js/jquery.popupWindow-min.js" ></script> 
<script type='text/javascript'> 
    $(function(){ 
    $('.diagram-popup').click(function(e){ 
     $(this).popupWindow({ 
     windowURL: $(this).data('href'), 
     centerBrowser: 1, 
     height: 560, 
     width: 1024 
     }); 
    }); 
    }); 
</script> 

Je suis sorta pas un fan d'avoir des fenêtres pop quand je clique ça ... Je ne pense pas qu'il présente une bonne expérience utilisateur. Mais à chacun leur.

Voici une jsFiddle comme preuve de concept: http://jsfiddle.net/UujmJ/1/