javascript - Get elements of HTML TR when a button in the row is clicked - Stack Overflow

admin管理员组

文章数量:1424567

I have the following Dynamic HTML row.

<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>

When the edit button is clicked, I need to get the values of the cell elements of that particular row into jQuery, as JS variables, that I can AJAX POST to another PHP page to insert into database. I tried to do it like the following, but it didn't pan out.

$(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();
         });

It doesn't catch the variables as I intended.How do I achieve this? I need to get these SPAN data to three variables.

I have the following Dynamic HTML row.

<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>

When the edit button is clicked, I need to get the values of the cell elements of that particular row into jQuery, as JS variables, that I can AJAX POST to another PHP page to insert into database. I tried to do it like the following, but it didn't pan out.

$(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();
         });

It doesn't catch the variables as I intended.How do I achieve this? I need to get these SPAN data to three variables.

• javascript
• php
• jquery
• jquery-delegate

Share Improve this question Follow edited Feb 1, 2016 at 13:24 rrk 15.9k44 gold badges3030 silver badges4747 bronze badges asked Feb 1, 2016 at 13:14 Akhil K PAULOSEAkhil K PAULOSE 2366 bronze badges 3

• 1 What is the currentTD variable for? Where is it defined? – mikeyq6 Commented Feb 1, 2016 at 13:17
• $('table').on('click', '.pr_edit', function () { use event delegation technique for dynamic elements. – Jai Commented Feb 1, 2016 at 13:18
• @mikeyq6: Updated the code. – Akhil K PAULOSE Commented Feb 1, 2016 at 13:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You need event delegation for dynamically generated elements and use text() instead of val() to get the content of span. Also use closest('tr') to get parent tr, you don't need to use each.

$(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();
     });
 });      

If you want to work with dynamic data and jQuery, you need to bind your click-event dynamically to. instead :

$('.pr_edit').click(function () {
    //magic
}

do

$('.pr_edit').on('click', function () {
    //magic
}

but if even your whole table is being loaded dynamically, you have to have an element thats "allways" there as a reference. like:

$('html, body').on('click', '.pr_edit', function () {
  //magic
}

Check this out for refference: http://api.jquery./on/

本文标签： javascriptGet elements of HTML TR when a button in the row is clickedStack Overflow