ボタンクリック時にテーブル行から値を取得するjquery

Question

ボタンクリック時にテーブルから行の値を取得しようとしています。

$('#tbl_items').on('click', '.btn_edit', function() { 
    var self = $(this); 
    alert($(this).data('serialnumber') + " " + $(this).data('description')); 
}); 

が、それは私に値を警告しません。これは私がテーブルから値を取得しようとする方法である

<tbody> 
    @foreach (var item in Model) 
    { 
     ViewBag.AccountID = item.AccountId.ToString(); 
     if (item.Items != null) 
     { 
      foreach (var itemOnList in item.Items) 
      { 
       <tr> 
        <td>@Html.DisplayFor(model => itemOnList.ItemId)</td> 
        <td data-itemname="@itemOnList.ItemName">@Html.EditorFor(model => itemOnList.ItemName)</td> 
        <td data-serialnumber="@itemOnList.SerialNumber">@Html.EditorFor(model => itemOnList.SerialNumber)</td> 
        <td data-brandname="@itemOnList.BrandName">@Html.EditorFor(model => itemOnList.BrandName)</td> 
        <td data-quantity="@itemOnList.Quantity">@Html.EditorFor(model => itemOnList.Quantity)</td> 
        <td data-description="@itemOnList.Description">@Html.EditorFor(model => itemOnList.Description)</td> 
        <td> 
         <a href="javascript:void(0);" data-itemid="@itemOnList.ItemId" class="btn_edit">Edit |</a> 
         <a href="javascript:void(0);" data-itemid="@itemOnList.ItemId" class="btn_delete">Delete</a> 
        </td> 
       </tr> 
      } 
     } 
    } 
</tbody> 

：これは私がテーブルを作成する方法です。

Answer 1

data-serialnumberとdata-descriptionの属性は、クリックしたa要素にないため、同じ行のtd要素にあります。あなたはまだしていない場合は

$('#tbl_items').on('click', '.btn_edit', function() { 
    var $tr = $(this).closest('tr'); 
    var serialNumber = $tr.find('td[data-serialnumber]').data('serialnumber'); 
    var description = $tr.find('td[data-description]').data('description'); 
    alert(serialNumber + " " + description); 
});