Question

我有通过Razor语法

显示的表格

这是代码

@foreach (var item in Model)
{
    <tr>
        <td class="point">
            @(rowNo += 1)
        </td>
        <td class="title">
            @Html.DisplayFor(modelItem => item.Date_of_Birthday)
        </td>
        <td id="name" class="title">
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td class="title"></td>
        <td class="title"></td>
        <td class="title"></td>
        <td style="text-align: end;">
           <img id="delete_pt" src="~/images/icons8-Delete-50.png"/>
            <img src="~/images/doc-50.png"/>
        </td>
    </tr>
}

我试图获得

的价值

<td id="name" class="title">
    @Html.DisplayFor(modelItem => item.Name)
</td>

通过JS

这是代码

<script>
$(document).on('click', '#delete_pt', function () {
    var title = $(this).find('#name').html();
    console.log(title);
});

但是当我点击“我没有得到价值”时，它就是空的。我的错误在哪里？

Answer 1

id="delete_pt"的元素是<img>，它不包含任何子元素。您需要找到父<tr>元素，然后找到<td id="name">元素。

$(document).on('click', '#delete_pt', function () {
    var title = $(this).closest('tr').find('#name').html();
    console.log(title);
});

但是你循环正在生成重复的id属性，这些属性是无效的html。您需要使用类名替换id属性，例如

<td class="name title">
    @Html.DisplayFor(modelItem => item.Name)
</td>
....
<img class="delete_pt"  src="~/images/icons8-Delete-50.png" />

然后使用

$(document).on('click', '.delete_pt', function () {
    var title = $(this).closest('tr').find('.name').html();
    console.log(title);
});

Answer 2

我相信您需要将其更改为

@Html.DisplayFor(item=> item.Date_of_Birthday)

Answer 3

您只需将item.name作为值传递给js

即可

<img id="delete_pt" src="~/images/icons8-Delete-50.png" onclick="deletePT(@item.Name)"/>

并为你的JS添加一个函数：（删除onclick事件）

function deletePT(itemname){
console.log(itemname);
}

您的代码会为HTML中的多个元素生成一个ID值 - 这并不好。但这不是问题的问题

无法从td获取文本（ASP.NET MVC）

3 个答案: