2010-12-07 5 views
0

J'ai un tableau qui liste les utilisateurs. Chaque ligne de table a le nom et l'emplacement des utilisateurs. Je veux être en mesure de cliquer sur la ligne du tableau et avoir des informations supplémentaires sur l'utilisateur apparaît sous la ligne du tableau cliqué pour l'utilisateur, sans avoir à actualiser la page. J'utilise le code ci-dessous, mais l'animation est boguée et je sais qu'il doit y avoir une meilleure façon de le faire.JQuery liste déroulante informations supplémentaires aide

 <script type="text/javascript" id="js">$(document).ready(function() { 
// Drop down data on tr click 
$('#users tr').click(function() { 
//Get user ID, must be in first td 
    var userID = $(this).find("td:first").html();  
//Remove any rows being displayed from previous clicks if any 
$('#data-row').remove(); 
//Insert a tr and td spanning all rows as a placeholder (display = none, we will animate next) 
    $(this).after('<tr id="data-row" style="display:none;"><td id="data-cell" colspan="5"></td></tr>'); 
//Show tr created above 
$('#data-row').show('400'); 
//Ajax loading image while we wait for load to return 
$('#data-cell').html('<p><img src="_images/ajax-loader-2.gif" width="220" height="19" /></p>'); 
//Load in data to tr td 
    $('#data-cell').load('admin/main/user_info_box.php?userID='+userID); 
}); 
//Removes Data if Header is clicked to sort rows 
$('th').click(function() { 
    $('#data-row').remove();   
}); 
}); 
</script> 

Répondre

0

Vous pouvez charger tous les utilisateurs d'informations au début et à .hide() tout, puis faire .slideToggle() sur un clic plutôt que d'AJAX séparée appelle

Questions connexes