Добавление кнопки сведений в динамический список HTML
У меня есть список HTML, который создается динамически с использованием отфильтрованных данных.
<tbody>
@{
foreach (var item in listado.Where(x => x.Raw != null)) {
<tr>
<td>@item.Id</td>
<td>@item.Usuario</td>
<td>@item.NIF_CIF</td>
<td>
@if (!(String.IsNullOrEmpty(item.Telefono)) && !(String.IsNullOrWhiteSpace(item.Telefono))) {
@item.Telefono
} else {
@Html.Raw("No disponible")}
</td>
<td>@Math.Round(item.PrecioTotal) €</td>
<td>@item.FechaCreacion.ToShortDateString()</td>
<td>
<button id = "detalles@(item.Id)">Detalles</button>
</td>
</tr>
<tr id = "vistaDetalles@(item.Id)" hidden>
<td>Detalles del presupuesto</td>
</tr>
}
}
</tbody>
Я попытался пометить кнопку, как вы можете видеть, используя item.Id, а затем указать на нее в этом скрипте:
<script>
$("document").ready(function (Id) {
$("#detalles"+ Id).click(function (Id) {
$("#vistaDetalles" + Id).show();
});
});</script>
Я также пытался не помечать их и ловить все кнопки (удаляя часть + Id), и тот же метод, чтобы поймать все скрытые tds, но ничего не работает. Что я делаю не так? Кроме того, не могли бы вы порекомендовать какой-нибудь учебный материал, чтобы я мог прояснить эту часть? Заранее спасибо. С Уважением.
Это тоже не работает. Я знаю, что не пристегиваю ни кнопки, ни tds правильно, но не знаю, как это сделать правильно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Попробуй:-
<script>
$("document").ready(function (Id) {
$("body").on("click","#detalles"+ Id, function (Id) {
$("#vistaDetalles" + Id).show();
});
});</script>
Я бы заменил твою кнопку на
<button onclick = "detalles(@item.Id)">Detalles</button>
И измените свой JavaScript на:
<script>
function detalles(Id) {
$("#vistaDetalles" + Id).show();
};
</script>
Спасибо за ваш ответ. Я пробовал и не получилось, но выглядит многообещающе. Может у меня еще где-то ошибка?
Попробуйте заменить $ ("# vistaDetalles" + Id) .show () на $ ("# vistaDetalles" + Id) .removeAttr ('hidden'). Но имейте в виду, что вы не скрываете их после того, как они были показаны. Поэтому, если вы нажмете на подробности нескольких записей, они все будут отображаться.
Для этого можно использовать атрибуты данных.
HTML
<button class = "detalles" data-itemid = "@item.Id">Detalles</button>
jQuery
$(".detalles").on("click",function(){
var itemId = $(this).data('itemid');
$('#vistaDetalles'+itemId).show();
});
Большое спасибо за ответ. Это действительно сработало, но только для первой кнопки списка. Не знаю, в чем ошибка, но еще раз спасибо.
@dCarMal, это потому, что идентификатор должен быть таким же, пока вы выполняете итерацию. Измените id = "detalles" на class = "detalles". Позвольте мне обновить ответ через мгновение. Я забыл представить, что
@dCarMal, проверьте сейчас
Вот и все! Большое спасибо, что решили проблему. Теперь каждая кнопка перемещает нужное мне поле с подробностями. Еще раз спасибо и спасибо всем за вашу поддержку.
ваш сценарий полностью неверен для некоторых аспектов, удалите идентификатор из функции document.ready. Замените $ ("# detalles" + Id) .click (function (Id) на $ (document) .on ("click", "id ^ = detalles", function () {