我想获得第一列行的值在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属性...