0
私はユーザーをリストする表を持っています。各テーブル行には、ユーザーの名前と場所があります。テーブルの行をクリックして、そのページの最新表示をせずに、ユーザーがクリックしたテーブル行の下にユーザーに関する追加情報が表示されるようにします。私は以下のコードを使用していますが、アニメーションはバグであり、これを行うためのより良い方法が必要であることは分かっています。そして、あなたが開始と.hide(でのユーザー情報のすべてを読み込むことができJQueryドロップダウン追加情報ヘルプ
<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>