У меня есть таблица со списком пользователей.Каждая строка таблицы имеет имя пользователя и местоположение.Я хочу иметь возможность щелкнуть строку таблицы и получить дополнительную информацию о пользователе, которая отображается под строкой таблицы, по которой пользователь щелкнул, без необходимости обновления страницы.Я использую код ниже, но анимация глючит, и я знаю, что должен быть лучший способ сделать это.
<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>