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，后跟NAME和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 parent function来获取您单击的当前行的上下文。

$('.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);
});

显示Jquery Alert中表行的所有值

2 个答案: