单击行中的按钮时获取HTML TR的元素

Question

我有以下动态 HTML行.

<tr role="row" class="odd">
     <td contenteditable="false" class="sorting_1"> </td>
     <td contenteditable="false"> <span class="name">Alex Nilson </span></td>
     <td contenteditable="false"><span class="price"> 1234 </span></td>
     <td contenteditable="false"> <span class="qty" >1234 </span></td>
     <td><button class="pr_edit" href="javascript:;"> Edit </button></td>
     <td><button class="pr_elete" href="javascript:;"> Delete </button></td>
</tr>

当单击编辑按钮时,我需要将该特定行的单元格元素的值转换为jQuery,作为JS变量,我可以将AJAX POST到另一个PHP页面以插入到数据库中.我尝试像下面这样做,但它没有成功.

$(document).ready(function () {
     $('.pr_edit').click(function () {
         var currentTD = $(this).parents('tr').find('td');            
         $.each(currentTD, function () {
             var iname = $(this).find("span.name").html();
             var iprice = $(this).find("span.price").val();
             var iqty=$(this).find("span.qty").val();
         });

它没有按照我的意图捕获变量.我如何实现这一目标？我需要将这些SPAN数据转换为三个变量.

Answer 1

您需要动态生成元素的事件委派,text()而不是val()获取内容span.也closest('tr')用来获取父tr,你不需要使用每个.

$(document).ready(function () {
     $('body').on('click', '.pr_edit', function () {
         var currentTR = $(this).closest('tr');
         var iname = currentTR.find("span.name").text();
         var iprice = currentTR.find("span.price").text();
         var iqty = currentTR.find("span.qty").text();
     });
 });