Get Value of closest class

Question

I have some rows of table that contain data from each row. Every row has a button to be clicked. Is there any way to get JS know what button I click and get it value of clicked row?

My code so far in this fiddle:

 var rowNum = 0; function addRow(frm) { rowNum++; var barang = $(this).closest("input.rf").find("input[name='rfdn']").val(); var barangid = $(this).closest("input.rf").find("input[name='rfdid']").val(); var price = $(this).closest("input.rf").find("input[name='rfdp']").val();; var row = '<tr id="rowNum' + rowNum + '">'; row += '<td class="left"><input type="hidden" name="pitem[]" value="'+barangid+'" />'+barang+'</td>'; row += '<td style="text-align:right;"><input type="number" min=0; name="qty[]" value="1" class="form-control" /></td>'; row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="'+price+'" />'+price+'</td>'; row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>'; jQuery('#refunds2').append(row); } function removeRow(rnum) { jQuery('#rowNum' + rnum).remove(); rowNum--; } 

 .list { border-collapse: collapse; width: 100%; border: 1px solid #DDDDDD; margin-bottom: 20px; padding:10px; } .list td{ padding:5px; } a.button, .list a.button { text-decoration: none; color: #FFF; display: inline-block; padding: 5px 15px 5px 15px; background: #003A88; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <table class="list"> <thead> <tr> <td>Product</td> <td>Refund</td> <td>Model</td> <td>Quantity</td> <td>Unit Price</td> <td>Total</td> </tr> </thead> <tbody> <tr> <td>Our Wedding</td> <td> <input type="hidden" class="rf" value="10745" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="Our Wedding" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="60000.0000" id="rfdp" name="rfdp"> <a class="button" onclick="addRow(this.form)">Refund</a> </td> <td>9786026100047</td> <td>1</td> <td>Rp 60,000.00</td> <td>Rp 60,000.00</td> </tr> <tr> <td>Salihah Mom's Diary</td> <td> <input type="hidden" class="rf" value="13172" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="Salihah Mom's Diary" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="66000.0000" id="rfdp" name="rfdp"> <a class="button" onclick="addRow(this.form)">Refund</a> </td> <td>9786026114010</td> <td>1</td> <td>Rp 66,000.00</td> <td>Rp 66,000.00</td> </tr> <tr> <td>The Perfect Husband</td> <td> <input type="hidden" class="rf" value="6249" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="The Perfect Husband" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="52195.0000" id="rfdp" name="rfdp"> <a class="button" onclick="addRow(this.form)">Refund</a> </td> <td>9786026922311</td> <td>1</td> <td>Rp 52,195.00</td> <td>Rp 52,195.00</td> </tr> </tbody> <tbody id="totals"> <tr> <td colspan="5">Sub-Total:</td> <td>Rp 178,195.00</td> </tr> </tbody> </table> <table id="refunds2" class="list"> <thead> <tr> <td class="left">Product</td> <td>Refund Qty</td> <td>Price</td> <td></td> </tr> </thead> </table> 

My code result is still undefined from the closest row data. I want to get each data from each row when I click "Refund". So if I click first row, data I get is only the first row to append to another table.

Answer 1

Is it this see working example: I just made an click event on the button and call the parent fiind element.

 var rowNum = 0; $('.button').on('click',function() { rowNum++; var barang = $(this).parent().find("input[name='rfdn']").val(); var barangid = $(this).parent().find("input[name='rfdid']").val(); var price = $(this).parent().find("input[name='rfdp']").val();; var row = '<tr id="rowNum' + rowNum + '">'; row += '<td class="left"><input type="hidden" name="pitem[]" value="'+barangid+'" />'+barang+'</td>'; row += '<td style="text-align:right;"><input type="number" min=0; name="qty[]" value="1" class="form-control" /></td>'; row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="'+price+'" />'+price+'</td>'; row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>'; jQuery('#refunds2').append(row); }); function removeRow(rnum) { jQuery('#rowNum' + rnum).remove(); rowNum--; } 

 .list { border-collapse: collapse; width: 100%; border: 1px solid #DDDDDD; margin-bottom: 20px; padding:10px; } .list td{ padding:5px; } a.button, .list a.button { text-decoration: none; color: #FFF; display: inline-block; padding: 5px 15px 5px 15px; background: #003A88; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="list"> <thead> <tr> <td>Product</td> <td>Refund</td> <td>Model</td> <td>Quantity</td> <td>Unit Price</td> <td>Total</td> </tr> </thead> <tbody> <tr> <td>Our Wedding</td> <td> <input type="hidden" class="rf" value="10745" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="Our Wedding" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="60000.0000" id="rfdp" name="rfdp"> <a class="button">Refund</a> </td> <td>9786026100047</td> <td>1</td> <td>Rp 60,000.00</td> <td>Rp 60,000.00</td> </tr> <tr> <td>Salihah Mom's Diary</td> <td> <input type="hidden" class="rf" value="13172" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="Salihah Mom's Diary" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="66000.0000" id="rfdp" name="rfdp"> <a class="button" >Refund</a> </td> <td>9786026114010</td> <td>1</td> <td>Rp 66,000.00</td> <td>Rp 66,000.00</td> </tr> <tr> <td>The Perfect Husband</td> <td> <input type="hidden" class="rf" value="6249" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="The Perfect Husband" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="52195.0000" id="rfdp" name="rfdp"> <a class="button">Refund</a> </td> <td>9786026922311</td> <td>1</td> <td>Rp 52,195.00</td> <td>Rp 52,195.00</td> </tr> </tbody> <tbody id="totals"> <tr> <td colspan="5">Sub-Total:</td> <td>Rp 178,195.00</td> </tr> </tbody> </table> <table id="refunds2" class="list"> <thead> <tr> <td class="left">Product</td> <td>Refund Qty</td> <td>Price</td> <td></td> </tr> </thead> </table> 

Answer 2

 var rowNum = 0; $(".button").click(function(){ rowNum++; var barang = $(this).closest("td").find("input[name='rfdn']").val(); var barangid = $(this).closest("td").find("input[name='rfdid']").val(); var price = $(this).closest("td").find("input[name='rfdp']").val(); var row = '<tr id="rowNum' + rowNum + '">'; row += '<td class="left"><input type="hidden" name="pitem[]" value="'+barangid+'" />'+barang+'</td>'; row += '<td style="text-align:right;"><input type="number" min=0; name="qty[]" value="1" class="form-control" /></td>'; row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="'+price+'" />'+price+'</td>'; row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>'; jQuery('#refunds2').append(row); }) function removeRow(rnum) { jQuery('#rowNum' + rnum).remove(); rowNum--; } 

 .list { border-collapse: collapse; width: 100%; border: 1px solid #DDDDDD; margin-bottom: 20px; padding:10px; } .list td{ padding:5px; } a.button, .list a.button { text-decoration: none; color: #FFF; display: inline-block; padding: 5px 15px 5px 15px; background: #003A88; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <table class="list"> <thead> <tr> <td>Product</td> <td>Refund</td> <td>Model</td> <td>Quantity</td> <td>Unit Price</td> <td>Total</td> </tr> </thead> <tbody> <tr> <td>Our Wedding</td> <td> <input type="hidden" class="rf" value="10745" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="Our Wedding" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="60000.0000" id="rfdp" name="rfdp"> <a class="button">Refund</a> </td> <td>9786026100047</td> <td>1</td> <td>Rp 60,000.00</td> <td>Rp 60,000.00</td> </tr> <tr> <td>Salihah Mom's Diary</td> <td> <input type="hidden" class="rf" value="13172" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="Salihah Mom's Diary" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="66000.0000" id="rfdp" name="rfdp"> <a class="button">Refund</a> </td> <td>9786026114010</td> <td>1</td> <td>Rp 66,000.00</td> <td>Rp 66,000.00</td> </tr> <tr> <td>The Perfect Husband</td> <td> <input type="hidden" class="rf" value="6249" id="rfdid" name="rfdid"> <input type="hidden" class="rf" value="The Perfect Husband" id="rfdn" name="rfdn"> <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> <input type="hidden" class="rf" value="52195.0000" id="rfdp" name="rfdp"> <a class="button">Refund</a> </td> <td>9786026922311</td> <td>1</td> <td>Rp 52,195.00</td> <td>Rp 52,195.00</td> </tr> </tbody> <tbody id="totals"> <tr> <td colspan="5">Sub-Total:</td> <td>Rp 178,195.00</td> </tr> </tbody> </table> <table id="refunds2" class="list"> <thead> <tr> <td class="left">Product</td> <td>Refund Qty</td> <td>Price</td> <td></td> </tr> </thead> </table> 

Answer 3

you try to edit "closest("input.rf")" to "closest("tr")". i think you are wrong.

Answer 4

Use (this) keyword to select the clicked button ,used closest method to select parent tr and use attr method to add attribute

 $(document).ready(function(){
 $("a.button").on('click',function(){
 $(this).attr('class',$(this).closest("tr").attr("id"));
 });
 });

Edit You use anchor tag as a button here you have to use these functions preventDefault() and stopPropagation();

 $(document).ready(function(){
 $("a.button").on('click',function(event){
event.preventDefault();
event.stopPropagation();
 $(this).attr('class',$(this).closest("tr").attr("id"));
 });
  });