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

本文关键字：Jquery Alert 显示 | 更新日期: 2023-09-27 18:01:29

我有一个表，有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          
        });
    });

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

一种可能的解决方案:在链接中添加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"));  
    });
});

可以使用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);
});
相关文章：