c# - 在 Jquery Alert 中显示表行的所有值

Question

我有一张桌子，有 3 列。最后一列是一个链接，当我单击该链接时，我需要将特定行的值显示为警报。

<table border="1">
    <tr>
        <th>
            id
            </th>
        <th>
            name
        </th>
          <th> 
            Occupation
        </th>
        <th>
            click the link
        </th>
    </tr>

@foreach (var i in Model.allHuman)
{
    <tr>
        <td>
            @Html.DisplayFor(mo => i.id)
        </td>
        <td>
            @Html.DisplayFor(mo => i.name)
        </td>
         <td>
            @Html.DisplayFor(mo => i.occupation)
        </td>
        <td>
            <a href='' id='ppl' name='ppl' class='humanclass'> display </a>
        </td>

当用户单击链接时，将显示一条警报，其中包含该特定行的内容。内容应具有ID后跟NAMEand的格式OCCUPATION。

jQuery方法：

  $(function () {
        $('.humanclass').click(function () {
            alert( ?????????? );   // How to display ID, NAME and OCCUPATION of the ROW          
        });
    });

Answer 1

一种可能的解决方案：data向链接添加属性，如下所示：

<a href='' id='ppl' name='ppl' class='humanclass' data-id='@(i.id)' data-name='@(i.name)' data-occupation='@(i.occupation)' "> display </a>

并在 jquery 函数中获取它

$(function () {
    $('.humanclass').click(function () {
        alert($(this).data("id"), $(this).data("name"), $(this).data("occupation"));  
    });
});

Answer 2

可以使用jQuery 父函数来获取您单击的当前行的上下文。

$('.humanclass').click(function () {
    var rowContext = $(this).parent('tr');
    var id = $("td:nth-child(0)", rowContext).val();
    var name = $("td:nth-child(1)", rowContext).val();
    var occupation = $("td:nth-child(2)", rowContext).val();
    alert(id+' '+name+' '+occupation);
});