javascript - 如何获取 td 元素并传递给 javascript 函数？

Question

我有以下 HTML 代码:

<table>
   <th>Items</th><th>Rate</th><th>Quantity</th>
   <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItemA"/></td></tr>
   <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItemB"/></td></tr>
   <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItemC"/></td></tr>
   <tr><td>Total Price</td><td><input type="text" id="txtPrice"/></td></tr>
</table>

在文本框的 onblur 事件中，我想调用一个 javascript 函数，它将用户添加的数量乘以费率并将其显示在 txtPrice 文本框中。但我陷入了这样的逻辑:我应该如何选择与输入的数量相对应的费率。

例如:当我在 txtItemA 文本框中输入 2 时，40 应显示在 txtPrice 文本框中。 Javascript 函数很简单，它只是将费率乘以输入的数量并将其显示在 txtPrice 中。

我应该怎么做才能获取与数量相关的费率并将其传递给 JavaScript 函数？

Javascript函数

function DisplayTotal(rate, quantity)
{
  document.getElementById('txtPrice').innerText = rate * quantity;
}

Answer 1

给有问题的元素一个公共(public)类，比如class="quantity"，这样就可以轻松地选择它们，而无需列出 id 或使用过于通用的选择器来获取总数价格字段，然后你可以这样做:

var $qtyFields = $('input.quantity').change(function() {
    var price = 0;
    $qtyFields.each(function() {
        price += this.value * $(this).closest("tr").find("td:eq(1)").text();
    });
    $("#txtPrice").val(price);
});

演示:http://jsfiddle.net/95hje/

也就是说，循环遍历每个字段并将其值乘以同一行中的费率列。使用 .closest() 查找相关元素得到一个共同的祖先然后 .find()向下遍历是一种常见的模式。

请注意，* 运算符将强制其操作数为数字，但我显示的代码实际上并未进行任何验证，因此如果用户输入非数字数据，总数将为NaN...