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.
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
Aber Sie müssen es über addRow (this) aufrufen und nicht addRow (this.form) – 25r43q
@ 25r43q Hallo, es bekommt die tr .. nicht die Art der Eingabe versteckt ... Wie die Eingabe verborgen zu bekommen? – Jayden