jquery 对动态生成的元素执行计算

Question

我有一个由一行 3 个输入元素组成的表：价格、数量和总计。在其下，我有两个链接，可以单击以动态生成表中的另一行。所有这些都运行良好，但实际计算总元素的值给我带来了麻烦。我知道如何计算第一个总元素的值，但是当我向表中添加新行时，我在扩展此功能时遇到了麻烦。这是 html：

<table id="table" border="0">
    <thead>
        <th>Price</th><th>Quantity</th><th>Total</th>
    </thead>
<tbody>
<tr>
    <td><input id ="price" type = "text"></input></td>
    <td><input id ="quantity" type = "text"></input></td>
    <td><input id ="total" type = "text"></input></td>
</tr>
</tbody>
</table>
<a href="#" id="add">Add New</a>
<a href="#" id="remove">Remove</a>

这是我正在使用的 jquery：

$(function(){
  $('a#add').click(function(){
    $('#table > tbody').append('<tr><td><input id ="price" type = "text"></input></td><td><input id ="quantity" type = "text"></input></td><td><input id ="total" type = "text"></input></td></tr>');  
   });
  $('a#remove').click(function(){
  $('#table > tbody > tr:last').remove();
  });
});

$(function(){
    $('a#calc').click(function(){
    var q = $('input#quantity').val();
    var p = $('input#price').val();
    var tot = (q*p);
    $('input#total').val(tot);
    });
 });

我是 jquery 的新手，所以可能有一个我不知道的简单方法来选择我想要计算的相关字段。任何指导将不胜感激。

Answer 1

多个元素不能共享相同的 ID。 ID 在整个文档中必须是唯一的。

也就是说，您必须更改代码以使用类：

<table id="table" border="0">
    <thead>
        <th>Price</th><th>Quantity</th><th>Total</th>
    </thead>
<tbody>
<tr>
    <td><input class="price" type = "text"></input></td>
    <td><input class="quantity" type = "text"></input></td>
    <td><input class="total" type = "text"></input></td>
</tr>
</tbody>
</table>
<a href="#" id="add">Add New</a>
<a href="#" id="remove">Remove</a>

并且：

$(function(){
  $('a#add').click(function(){
    $('#table > tbody').append('<tr><td><input class ="price" type = "text"></input></td><td><input class ="quantity" type = "text"></input></td><td><input class ="total" type = "text"></input></td></tr>');  
   });
  $('a#remove').click(function(){
  $('#table > tbody > tr:last').remove();
  });
});

为了提供完整的解决方案，您的 ID calc 的链接在哪里。计算应该如何进行？每一行是否应该有自己的计算按钮，还是有一个全局按钮来计算每一行的值？

如果是后者，您可以使用如下内容：

$('a#calc').click(function(){
    $('#table tr').each(function() {
        $(this).find('.total').val(
            parseFloat($(this).find('.quantity').val())*
            parseFloat($(this).find('.price').val())
        );
    }
}

说明：

当您单击链接时，该函数将循环遍历表中的每一行，搜索具有 quantity 和 price 并将结果放入该行中类 total 的输入中。

请注意，我使用 parseFloat 来确保使用数字进行计算。

---

另请注意，您不必在创建的每一段 JS 代码中都使用 $(function(){})。将加载 DOM 之后需要执行的所有内容（因为您从代码中访问元素）放入此函数中。所以你应该这样做：

$(function() {
    $('a#add').click(function(){
         // .....
    }:

    $('a#calc').click(function(){
        // ...
    };
}

---

更新：如果你想使用.blur()方法，这里有一个例子：

$('#table').delegate('input.total' , 'blur', function(){
    var row = $(this).closest('tr');
    $(this).val(
            $('.quantity', row).val())*
            $('.price', row).val())
    );
});

.closest() 获取与选择器匹配的最接近的父级（在本例中为行），其余类似到我编写的第一个函数（获取特定行的值。

我使用较新的方法 delegate( ) 在这里，但您也可以使用 .live()$(input.total).blur(function(){})将运行（当加载 DOM 时）尚未创建任何行。

Answer 2

您正在为这些新表行创建重复的“id”值。 id 在任何一个页面中应该是唯一的（它可以在多个页面上使用，但每个页面只能使用一次）。

$('input#quantity') 只会返回它找到的 id 的第一个（也可能是最后一个）实例，因为它不应该出现多次。

解决方法是将所有 id 更改为 name=，然后执行类似以下操作（在伪代码中：

var rows = $('table').getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
    var q = ... extract quantity field from this row;
    var p = ... extract price field from this row;
    ... do calculation as usual
    ... store result in the total field in this row
}