我想獲得第一列行的值在eack href中單擊HTML表

Question

我想要獲得每行第一列的值href單擊編輯。例如，如果我點擊第一行href，那麼我應該得到第一列值的警報。

$(document).ready(function() { 
     var jsonData = [{ 
      id: 'A01', 
      name: 'Fadhly' 
     }, { 
      id: 'A02', 
      name: 'Permata' 
     }, { 
      id: 'A03', 
      name: 'Haura' 
     }, { 
      id: 'A04', 
      name: 'Aira' 
     }]; 

     $.each(jsonData, function (key, val) { 
      var tr = '<tr>'; 
      tr += '<td>' + (key + 1) + '</td>'; 
      tr += '<td>' + val.id + '</td>'; 
      tr += '<td>' + val.name + '</td>'; 
      tr += '<td><a href="#menu1">Edit</a</td>'; 
      tr += '</tr>'; 
      $('tbody').append(tr); 
     }); 

我的HTML代碼

<script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<table border="1" width="100%"> 
<thead> 
<tr> 
    <th>#</th> 
    <th>Id</th> 
    <th>Name</th> 
    <th>Action</th> 
</tr> 
</thead> 

<tbody> 
</tbody> 
</table> 

Answer 1

檢查了這一點。

這工作完全

$(document).ready(function() { 
     var jsonData = [{ 
      id: 'A01', 
      name: 'Fadhly' 
     }, { 
      id: 'A02', 
      name: 'Permata' 
     }, { 
      id: 'A03', 
      name: 'Haura' 
     }, { 
      id: 'A04', 
      name: 'Aira' 
     }]; 

     $.each(jsonData, function (key, val) { 
      var tr = '<tr>'; 
      tr += '<td>' + (key + 1) + '</td>'; 
      tr += '<td>' + val.id + '</td>'; 
      tr += '<td>' + val.name + '</td>'; 
      tr += '<td><button class="delete" data-key="' + (key + 1) + '"><a href="#menu1">Edit</a></button></td>'; 
      tr += '</tr>'; 
      $('tbody').append(tr); 
     }); 

     $('tbody .delete a').click(function(){ 
      alert($(this).closest('tr').find('td:first-child').text()); 
     }); 
}); 

這裏是更新的jsfiddle鏈接。一探究竟。 https://jsfiddle.net/86n7qkpe/

Answer 2

由於生成的HTML結構ň行是如下動態添加到<tbody>：

<table border="1" width="100%"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>Id</th> 
     <th>Name</th> 
     <th>Action</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td> 
     <a>Edit</a> 
     </td> 
    </tr> 
    <tr><!-- n dynamically generated rows --></tr> 
    </tbody> 
</table> 

您可以使用下面的jQuery在第一個文本內執行alert()使用click處理程序所提供的上下文的相應行的列：

$(document).ready(function(){ 
    $('tbody').on('click', 'a', function(){ 
     var value = $(this).closest('tr').find('td').first().text(); 
     alert(value); 
    }); 
}); 

這裏是一個jsfiddle演示功能。它演示了第一列被警告的值，以及通過單擊事件執行事件<a>點擊顯示動態/添加行。這是因爲<a>元素不是直接定位的，它們作爲上下文提供給永久DOM元素，例如不會添加或刪除的元素。

更新

如果你需要抓住其他列，你可以使用結構來eq()抓住一個零（0）的索引jQuery的查詢。例如，如果你需要第二列，你可以：

// first column 
var value = $(this).closest('tr').find('td').eq(0).text(); 

// second column 
var value = $(this).closest('tr').find('td').eq(1).text(); 

// third column 
var value = $(this).closest('tr').find('td').eq(2).text(); 

希望這會有所幫助！

Answer 3

$.each(jsonData, function (key, val) { 
     var tr = '<tr>'; 
     tr += '<td>' + (key + 1) + '</td>'; 
     tr += '<td>' + val.id + '</td>'; 
     tr += '<td>' + val.name + '</td>'; 
     tr += '<td><button class="delete" data-key="' + (key + 1) + '" onclick="alert('+(key+1)+')"><a href="#menu1">Edit</a></button></td>'; 
     tr += '</tr>'; 
     $('tbody').append(tr); 
    }); 

只需將其添加到onclick屬性...