使用javascript从引导程序表中检索id

retrieving the id from bootstrap table using javascript

本文关键字：检索 id 程序表 javascript 使用      更新时间：2023-09-26

我的web应用程序项目使用MVC 5。我创建了一个由MVC自己完成的表的内置列表。现在我想得到我点击的数据的id。MVC本身创建了一个编辑/删除选项，但我想让整行成为一个可点击的选项，这样当我按下其中一行时，我就会链接到该id的详细信息。问题是，当我单击该行时，根本无法将id传递给javascript。我试着搜索它，发现了类似这样的var id=$（'.clickableRow'）.attr（"data id"）；但它只显示未定义的值。

这里是我的index.cshtml源代码

@foreach (var item in Model){
<tr id="clickableRow(this)">
    <td>
        @Html.DisplayFor(modelItem => item.SentBy)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.SentTo)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Subject)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.SentDate)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Message)
    </td>
    <td>
        @Html.ActionLink("Details", "Details", new { id = item.MailId }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.MailId })
    </td>
</tr>

}

这里是我尝试使用的javascript：

<script type="text/javascript">
$(document).ready(function () {
    $('.clickableRow').on('click', function (e) {
        var id = $(this).closest('tr').find('td.SentBy').html();
        //var id = $('.clickableRow').attr("data-id");
        alert(id);
        //window.location = "Mails/Details/" + id;
        // Or, we can grab the HREF from the first anchor:
        //window.location = $('a:first', this).attr('href');
    });
});

提前感谢您的帮助。

您有<tr id="clickableRow(this)">，它似乎（错误地）假设id属性是类似onclick的事件。此外，您正试图将id作为data属性访问，这将要求它以data-（即data-id）为前缀，并且我不确定.clickableRow类来自哪里，因为没有任何类被分配给示例行。

我对.NET一无所知，但您应该将实际的记录ID放在data-id属性中：

<tr class="clickableRow" data-id="OUTPUT_ID_HERE">

$(function(){
    $('table').on('click', '.clickableRow', function(){
        var $this = $(this);
        var id = $this.data('id');  
        alert(id);
    })
})

在您的JavaScript中，您正试图访问class元素，而在HTML中，您定义了一个ID属性。

尝试将您的JavaScript更改为此

$(document).ready(function () {
    $('#clickableRow').on('click', function () {
        var $this = $(this);
        var id=$this.attr("data-id");
        alert(id);
    });
});
相关文章：