获得最接近的等级的价值

时间：2017-09-07 09:56:32

标签： javascript jquery html

我有一些表行包含每行的数据。每行都有一个要点击的按钮。有没有办法让JS知道我点击了什么按钮并获得点击行的价值？

到目前为止我的代码在这个小提琴中：

＆＃13;
＆＃13; 
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--;
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我的代码结果仍未从最近的行数据中定义。当我点击＆＃34;退款＆＃34;时，我想从每一行获取每个数据。因此，如果我单击第一行，我获得的数据只是附加到另一个表的第一行。

4 个答案:

答案 0 :(得分：0)

这是看到工作示例：我只是在按钮上创建了一个click事件并调用了父元素。

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>

答案 1 :(得分：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>
			<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>

答案 2 :(得分：0)

您尝试编辑＆＃34;最近（＆＃34; input.rf＆＃34;）＆＃34;最近（＆＃34; tr＆＃34;）＆＃34;。我认为你错了。

答案 3 :(得分：0)

使用（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"));
 });
  });
相关问题
最新问题