У меня есть таблица данных jquery, теперь я хочу реализовать функцию удаления. но проблема в том, что функция javascript запускается только тогда, когда я нажимаю ссылку «удалить» во второй строке, в других строках функция javascript не запускается.
<table class="table table-bordered table-responsive" id="tblDetails">
<thead style="background-color:#ee5e45; color:white">
<tr>
<th>Movie Name</th>
<th>Release Date</th>
<th>Genre</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
@foreach (var item in ViewBag.Movies as List<Movie>)
{
<tr>
<td>
@Html.DisplayFor(modelitem=>item.Title)
</td>
<td>
@Html.DisplayFor(modelitem => item.ReleaseDate)
</td>
<td>
@Html.DisplayFor(modelitem => item.Genre)
</td>
<td>
@Html.DisplayFor(modelitem => item.Price)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.code }, htmlAttributes: new { @class = "glyphicon glyphicon-pencil" }) |
@Html.ActionLink("Delete", "Delete", new { id = item.code }, htmlAttributes: new { @class = "glyphicon glyphicon-trash", id = "dlt" })
</td>
</tr>
}
</table>
И код java-скрипта приведен ниже.
@section Scripts {
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="http://tristanedwards.me/u/SweetAlert//lib/sweet-alert.js"></script>
<script>
$(document).ready(function (e) {
$('#tblDetails').dataTable();
});
$("#dlt").click(function (e) {
//whenever our button is clicked
e.preventDefault();
//get a reference to the container form
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function () {
//user selected "Yes", Let's submit the form
_form.submit();
});
});
</script>
}
Пожалуйста, помогите мне в этом отношении заранее спасибо.
Здесь у вас несколько строк, поэтому нельзя использовать атрибут id для нескольких строк. в этом случае вы можете использовать атрибут класса
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.code }, htmlAttributes: new { @class = "glyphicon glyphicon-pencil" }) |
@Html.ActionLink("Delete", "Delete", new { id = item.code }, htmlAttributes: new { @class = "glyphicon glyphicon-trash deleteRow" })
</td>
в скрипте просто измените селектор
<script>
$(document).ready(function (e) {
$('#tblDetails').dataTable();
});
$(".deleteRow").click(function (e) {
//whenever our button is clicked
e.preventDefault();
//get a reference to the container form
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function () {
//user selected "Yes", Let's submit the form
_form.submit();
});
});
</script>
id
должен быть уникальным во всем HTML-документе. Все ваши кнопки удаления имеют одинаковыйid
. Попробуйте изменить его на класс. abhishekkannojia$(".Delete").each((count, element) => { ... });
mtizzianiid
, а не последний user3559349