私は各行のデータを含むテーブルのいくつかの行を持っています。すべての行にはクリックするボタンがあります。 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>
\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>
私のコードの結果は依然として最も近い行データから定義されていません。 「払い戻し」をクリックすると、各行の各データを取得する必要があります。だから私が最初の行をクリックすると、私が得るデータは、別のテーブルに追加する最初の行だけです。
あなたは のAddRow(elemは){はconsole.log(elem.parentNode.parentNode.children [0] .innerText)} – 25r43q
のように、あなたは多くのことを行うことができます(この)引数をログインした場合でも、あなたはaddRow(this)でなく、addRow(this.form)で呼び出さなければなりません – 25r43q
@ 25r43qこんにちは、それは入力タイプが隠されていません...入力を隠すには? – Jayden