2017-09-07 2 views
0

Ich habe einige Zeilen der Tabelle, die Daten aus jeder Zeile enthalten. Jede Zeile hat eine Schaltfläche, auf die geklickt werden kann. Gibt es eine Möglichkeit, JS wissen zu lassen, auf welche Schaltfläche ich klicke und den Wert der angeklickten Zeile erhalte?Get Wert der nächsten Klasse

Mein Code so weit in dieser Geige:

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> 
 
\t \t \t <td>Refund</td> 
 
     <td>Model</td> 
 
     <td>Quantity</td> 
 
     <td>Unit Price</td> 
 
     <td>Total</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Our Wedding</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="hidden" class="rf" value="10745" id="rfdid" name="rfdid"> 
 
\t \t \t \t <input type="hidden" class="rf" value="Our Wedding" id="rfdn" name="rfdn"> 
 
\t \t \t \t <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> 
 
\t \t \t \t <input type="hidden" class="rf" value="60000.0000" id="rfdp" name="rfdp"> 
 
\t \t \t \t <a class="button" onclick="addRow(this.form)">Refund</a> 
 
\t \t </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> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="hidden" class="rf" value="13172" id="rfdid" name="rfdid"> 
 
\t \t \t \t <input type="hidden" class="rf" value="Salihah Mom's Diary" id="rfdn" name="rfdn"> 
 
\t \t \t \t <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> 
 
\t \t \t \t <input type="hidden" class="rf" value="66000.0000" id="rfdp" name="rfdp"> 
 
\t \t \t \t <a class="button" onclick="addRow(this.form)">Refund</a> 
 
\t \t \t </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> 
 
\t \t \t <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> 
 
\t \t \t </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>

Mein Code Ergebnis nach wie vor von den nächsten Zeilendaten nicht definiert ist. Ich möchte alle Daten aus jeder Zeile abrufen, wenn ich auf "Rückerstattung" klicke. Wenn ich also auf die erste Zeile klicke, wird nur die erste Zeile an eine andere Tabelle angehängt.

+0

Wenn Sie sich die (dieses) Argument Sie eine Menge Dinge zu tun, wie in addRow (elem) {console.log (elem.parentNode.parentNode.children [0] .innerText)} – 25r43q

+0

Aber Sie müssen es über addRow (this) aufrufen und nicht addRow (this.form) – 25r43q

+0

@ 25r43q Hallo, es bekommt die tr .. nicht die Art der Eingabe versteckt ... Wie die Eingabe verborgen zu bekommen? – Jayden

Antwort

0

Ist es das Arbeitsbeispiel: Ich habe gerade ein Klick-Ereignis auf der Schaltfläche und rufen Sie das Eltern-Element find.

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> 
 
\t \t \t <td>Refund</td> 
 
     <td>Model</td> 
 
     <td>Quantity</td> 
 
     <td>Unit Price</td> 
 
     <td>Total</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Our Wedding</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="hidden" class="rf" value="10745" id="rfdid" name="rfdid"> 
 
\t \t \t \t <input type="hidden" class="rf" value="Our Wedding" id="rfdn" name="rfdn"> 
 
\t \t \t \t <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> 
 
\t \t \t \t <input type="hidden" class="rf" value="60000.0000" id="rfdp" name="rfdp"> 
 
\t \t \t \t <a class="button">Refund</a> 
 
\t \t </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> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="hidden" class="rf" value="13172" id="rfdid" name="rfdid"> 
 
\t \t \t \t <input type="hidden" class="rf" value="Salihah Mom's Diary" id="rfdn" name="rfdn"> 
 
\t \t \t \t <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> 
 
\t \t \t \t <input type="hidden" class="rf" value="66000.0000" id="rfdp" name="rfdp"> 
 
\t \t \t \t <a class="button" >Refund</a> 
 
\t \t \t </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> 
 
\t \t \t <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> 
 
\t \t \t </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>

0

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> 
 
\t \t \t <td>Refund</td> 
 
     <td>Model</td> 
 
     <td>Quantity</td> 
 
     <td>Unit Price</td> 
 
     <td>Total</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Our Wedding</td> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="hidden" class="rf" value="10745" id="rfdid" name="rfdid"> 
 
\t \t \t \t <input type="hidden" class="rf" value="Our Wedding" id="rfdn" name="rfdn"> 
 
\t \t \t \t <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> 
 
\t \t \t \t <input type="hidden" class="rf" value="60000.0000" id="rfdp" name="rfdp"> 
 
\t \t \t \t <a class="button">Refund</a> 
 
\t \t </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> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="hidden" class="rf" value="13172" id="rfdid" name="rfdid"> 
 
\t \t \t \t <input type="hidden" class="rf" value="Salihah Mom's Diary" id="rfdn" name="rfdn"> 
 
\t \t \t \t <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq"> 
 
\t \t \t \t <input type="hidden" class="rf" value="66000.0000" id="rfdp" name="rfdp"> 
 
\t \t \t \t <a class="button">Refund</a> 
 
\t \t \t </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> 
 
\t \t \t <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> 
 
\t \t \t </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>

0

Sie versuchen, "am nächsten (" input.rf ")" auf "am nächsten (" tr ")" zu bearbeiten. ich denke du liegst falsch.

0

nachfolgenden() Stichwort die klickten Taste zur Auswahl, verwendet am nächsten Methode Mutter tr auszuwählen und attr Methode Attribut hinzufügen

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

bearbeiten Sie Anker-Tag als hier Taste verwenden Sie verwenden müssen Diese Funktionen preventDefault() und stopPropagation();

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