獲取最接近的類的價值

Question

我有一些表行，每行包含數據。 每行都有一個要單擊的按鈕。 有什么方法可以讓JS知道我單擊了什么按鈕並獲得它的被單擊行的值？

到目前為止，我的代碼在這個小提琴中：

 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> 

根據最近的行數據，我的代碼結果仍然不確定。 當我單擊“退款”時，我想從每一行獲取每個數據。 因此，如果單擊第一行，則獲得的數據只是追加到另一個表的第一行。

Answer 1

這是一個看得見的工作示例：我剛剛在按鈕上創建了一個click事件，並調用了父fiind元素。

 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

您嘗試將“ closest（“ input.rf”）”編輯為“ closest（“ tr”）”。 我認為你錯了。

Answer 4

使用（this）關鍵字選擇單擊的按鈕，使用最接近的方法選擇父級tr，並使用attr方法添加屬性

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

編輯您將錨標記用作按鈕，此處必須使用以下功能preventDefault（）和stopPropagation（）;。

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