Question

我有一个列出用户的表。每个表行都有用户名称和位置。我希望能够单击表格行，并在用户点击的表格行下方显示有关该用户的其他信息，而无需刷新页面。我正在使用下面的代码，但动画是错误的，我知道必须有更好的方法来做到这一点。

       <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>

Answer 1

您可以在开始时加载所有用户信息，然后在.hide（）中加载所有用户信息，然后在单击而不是单独的AJAX调用上执行.slideToggle（）

JQuery下拉附加信息帮助

1 个答案: