Comment sélectionner l'id correct pour le bouton spécifique pressé dans la table dynamique

Question

Je suis relativement nouveau à jquery et ne peut pas pour la vie de moi obtenir ce pour retourner l'id youtube approprié, il renvoie toujours le premier dans la table.

php. Je charge l'identifiant youtube depuis ma base de données puis l'affiche dans le tableau.

require_once 'library/Zend/Loader.php'; 
Zend_Loader::loadClass('Zend_Gdata_YouTube'); 
echo '<br/>'; 
echo '<table width="95%" cellpadding="0" cellspacing="0" align="center" border="0">'; 

while ($row = mysqli_fetch_assoc($videoquery)) 
{ 
$vidid = ($row['id']); 
$vidtitle = ($row['title']); 
$vidip = ($row['ip']); 
$page2 = ($row['page']); 
$q = ($row['youtubeid']); 

$yt = new Zend_Gdata_YouTube(); 
$yt->setMajorProtocolVersion(2); 
$videoEntry = $yt->getVideoEntry($q); 
$thumbnail = '<img src="' . $videoEntry->mediaGroup->thumbnail[0]->url . '" width="100" height="92"'; 

echo '<tr bgcolor="#333"> 
<td width="100px" rowspan="2" nowrap="nowrap" style="border:2px solid #999999">'.$thumbnail.'</td> 
<td colspan="2" align="left">' .$vidtitle. ' 
</td></tr> 
<tr bgcolor="#3B3B3B"><td nowrap="nowrap"> 
<form method="post"> 
<input name="parse" type="hidden" value="playvid" /><input name="youtubeid" id="youtubeid" type="hidden" value="'.$q.'" />; 
<input type="button" name="play" id="play" value="Play Video" /> 
</form></td> 
<td align="right"> 
<form method="post" action=""> 
<input type="hidden" name="page2" value="'.$_SERVER['REQUEST_URI'].'"> 
<input name="parse" type="hidden" value="deletepost2" /> 
<input name="postid2" type="hidden" value="'.$vidid.'"/>'; 
if ($topuserid == $_GET['id']){ 
echo '<input type="submit" name="deletepost2" id="deletepost2" value="Delete Video" /';> 
} 
echo '</form></td></tr>'; 
} 
echo '</table>'; 
} 

Code Jquery

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#play').live('click', function() { 
$('#video').empty() 
var vidid = $('#youtubeid').val(); 
alert(vidid); 
var playvid = '<object width="300" height="193">'+ 
'<param name="movie" value="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1"></param>'+ 
'<param name="allowFullScreen" value="true"></param>'+ 
'<param name="allowscriptaccess" value="always"></param>'+ 
'<embed src="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="193"></embed>'+ 
'</object>'; 
$('#video').append(playvid); }); 
}); 
</script> 

Answer 1

vous devez donner votre sélecteur un certain contexte. mettre en œuvre aucun changement dans votre code HTML, vous pouvez changer votre js à

$(document).ready(function(){ 
var $tr = $(this).closest('tr') 
$('#play').live('click', function() { 
tr.find('#video').empty() 
var vidid = tr.find('#youtubeid').val(); 
alert(vidid); 
var playvid = '<object width="300" height="193">'+ 
'<param name="movie" value="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1"></param>'+ 
'<param name="allowFullScreen" value="true"></param>'+ 
'<param name="allowscriptaccess" value="always"></param>'+ 
'<embed src="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="193"></embed>'+ 
'</object>'; 
tr.find('#video').append(playvid); }); 
}); 

Answer 2

Nathan avait la bonne idée mais avait quelques erreurs dans son code. Essayez ceci:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#play').live('click', function() { 
    var tr = $(this).closest('tr'); 
    tr.find('#video').empty(); 
    var vidid = tr.find('#youtubeid').val(); 
    alert(vidid); 
    }); 
}); 
</script>