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

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>