У меня есть таблица с записями из api, которая отображает данные пользователей. Изображение пользователя не отображается в таблице, а отображается в отдельном div при нажатии tr.
<div id='users'>
<div class='users-details'>
<table>
<tr><td id='1' class='user'>User 1</td></tr>
<tr><td id='2' class='user'>User 2</td></tr>
<tr><td id='3' class='user'>User 2</td></tr>
<tr><td id='4' class='user'>User 2</td></tr>
</table>
</div>
<div class="holder-container">
<div class='preview-holder'>
<!-- user data pushed to here -->
<div class='user-prev'>
// users details displayed here
</div>
</div>
</div>
Вышеупомянутое работает и заменяет данные в div .user-prev при выборе одного пользователя строка. Теперь у меня проблемы с выбором нескольких тд. Я бы хотел очистить user-prev и clone .preview-holder в зависимости от выбранного td .user.
Например, если я выберу user1 tr .user, отобразить сведения о пользователе 1. При выборе user2, user3, user4 удалите предыдущие результаты из .user-prev, продублируйте его 3 раза и обновите результаты для каждого выбранного tr.user.
У меня есть приведенный ниже код, который вызывал проблемы при выборе несколько он иногда дублирует и не очищает первые результаты
$(document).on("click", ".user", function (event) {
var selected = []; // store selected users id
$('.user-prev').html(''); // clear div empty
for (var i = 0; i < ids_arr.length; ++i)
selected .push({UserIds: ids_arr[i]});
$.ajax({
url: "/db/user_api.php",
data: { func_name: "getUsers", rows: $.toJSON(selected)},
type: 'post',
dataType: 'json',
success: function(res)
{
for (var i = 0; i < res.length; ++i)
{
var x = res[i].result[0];
var count = $("tr.user.selected").length;
}
if (count == 1)
{
$(".user-prev").html(x.UserName); // display user name, also returns pics
}
if (count > 1)
{
// duplicate/clone the div as many times as selected [] and populate each user-prev with selected name
$(".user-prev").clone().append(x.UserName); }
}
});
});
TIA