Question

我有一个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>
    }

请提前感谢您的帮助。

Answer 1

这里有多行，因此不能对多行使用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>

只有当您单击第二行中的“删除”链接时，才会触发JavaScript函数

1 个答案: