0

我有一个由一行 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 的新手，所以可能有一个我不知道的简单方法可以选择我想要计算的相关字段。任何指导将不胜感激。

4

2 回答 2

3

您不能有多个共享相同 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结果放入该total行中带有类的输入中。

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

另请注意，您不必使用$(function(){})您创建的每一段 JS 代码。将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 时）还没有创建行。

于 2010-04-05T21:34:58.577 回答
1

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

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

一种解决方法是将所有 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
}
于 2010-04-05T21:28:30.027 回答