Question

我有这个html表：

<table id='table1'>
     <tr>
         <td>String</td>
         <td><input type='text' id='first-input-01'></input></td>
         <td><input type='text' id='second-input-01'></input></td>
     </tr>
     <tr>
         <td>String</td>
         <td><input type='text' id='first-input-02'></input></td>
         <td><input type='text' id='second-input-02'></input></td>
     </tr>
     <tr>
         <td>Total:</td>
         <td> </td>
         <td>(total goes here)</td>
     </tr>
</table>

并使用jQuery，我想找到＃first-input-xx的值，并将它们乘以＃second-input-xx表示每个表行，将每一行加到总计中。但是，我发现很难为每个表行选择每个输入。我在尝试：

var total = 0;

$("#table1 tr").each(function() {
    var amount1 = $(this).children("td:nth-last-child(2) input").val();
    var amount2 = $(this).children("td:last input").val();
    total = total + (parseFloat(amount1) * parseFloat(amount2));
});

感谢任何帮助。

Answer 1

当您尝试查找输入元素时，不能使用.children（），而是使用.find（）

var total = 0;

$("#table1 tr").each(function () {
    var amount1 = $(this).find("td:eq(-2) input").val();
    var amount2 = $(this).find("td:last input").val();
    total += (parseFloat(amount1) * parseFloat(amount2)) || 0;
});
alert(total)

$('button').click(function() {
  var total = 0;

  $("#table1 tr").each(function() {
    var amount1 = $(this).find("td:eq(-2) input").val();
    var amount2 = $(this).find("td:last input").val();
    total += (parseFloat(amount1) * parseFloat(amount2)) || 0;
  });
  alert(total)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='table1'>
  <tr>
    <td>String</td>
    <td>
      <input type='text' id='first-input-01'></input>
    </td>
    <td>
      <input type='text' id='second-input-01'></input>
    </td>
  </tr>
  <tr>
    <td>String</td>
    <td>
      <input type='text' id='first-input-02'></input>
    </td>
    <td>
      <input type='text' id='second-input-02'></input>
    </td>
  </tr>
</table>
<button>Test</button>

Answer 2

$("#table1 tr").each(function() {
    var amount1 = $(this).find("td:nth-child(2)").val();
    var amount2 = $(this).find("td:nth-child(3)").val();
    total = total + (parseFloat(amount1) * parseFloat(amount2));
});

Answer 3

试试这个：使用 eq()

var total = 0;

$("#table1 tr").each(function () {
    var input = $(this).find('input');
    if (input.length == 2) {
        total += input.eq(0).val() * input.eq(1).val();
    }
    console.log(total)
});

<强> DEMO

Answer 4

这里我添加了一些代码。请检查一下。

$("#calculate_btn").click(function(){
var total=0;
var row_mux=1;
$("#table1 tr").each(function(key,val){

  $(val).find("input").each(function(k,v){

   row_mux*=parseFloat($(v).val());

  });
  total=row_mux++;
});
alert(total);
$("#table1 tr:last").find("td:last").html(total);
});

demo

如何使用jQuery在每个tr中选择两个单独的输入？

4 个答案: