2017-09-07 17 views
0

私は各行のデータを含むテーブルのいくつかの行を持っています。すべての行にはクリックするボタンがあります。 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>

私のコードの結果は依然として最も近い行データから定義されていません。 「払い戻し」をクリックすると、各行の各データを取得する必要があります。だから私が最初の行をクリックすると、私が得るデータは、別のテーブルに追加する最初の行だけです。

+0

あなたは のAddRow(elemは){はconsole.log(elem.parentNode.parentNode.children [0] .innerText)} – 25r43q

+0

のように、あなたは多くのことを行うことができます(この)引数をログインした場合でも、あなたはaddRow(this)でなく、addRow(this.form)で呼び出さなければなりません – 25r43q

+0

@ 25r43qこんにちは、それは入力タイプが隠されていません...入力を隠すには? – Jayden

答えて

0

実例を参照してください:ボタン上でクリックイベントを作成し、親の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> 
 
\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

あなたは "最も近い(" TR ")" に "最も近い(" input.rfを ")" を編集してみてください。私はあなたが間違っていると思う。

0

使用すると、クリックされたボタンを選択するには(この)キーワードは、あなたが使用する必要があり、ここでボタンとしてアンカータグを使用して編集 属性に

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

を追加するために、親TRを選択し、attrの方法を使用するために最も近い方法を使用しましたこれらの関数は、Define()およびstopPropagation()を防止します。

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