Question

我有一个由3行输入元素组成的表：Price，Quanity和Total。在那之下，我有两个链接，我可以单击以动态生成表中的另一行。一切运作良好，但实际上计算总元素的值给我带来了麻烦。我知道如何计算第一个总元素的值，但是当我向表中添加一个新行时，我无法扩展此功能。这是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的链接在哪里。该计算应如何运作？每行应该有自己的calculation按钮，还是有一个全局按钮来计算每一行的值？

如果是后者你可以使用这样的东西：

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

<强>解释

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

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

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

$(function(){})

更新：如果您想使用$(function() { $('a#add').click(function(){ // ..... }: $('a#calc').click(function(){ // ... }; }方法，请举例说明：

.blur()

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

我在这里使用较新的方法delegate()，但您也可以使用.live()。请注意，您必须使用其中一个，因为您正在动态创建行，例如将运行$('#table').delegate('input.total' , 'blur', function(){ var row = $(this).closest('tr'); $(this).val( $('.quantity', row).val())* $('.price', row).val()) ); });（当加载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
}

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

2 个答案: