在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，然後爲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); 
});