使用td属性计算产品总和

时间:2011-07-18 09:40:30

标签: javascript jquery

我有这张桌子:

<table>
    <thead>
        <tr>
            <th>Quantity</th>
            <th>&nbsp;</th>
            <th>Price</th>
            <th>Sum</th>
        </tr></thead>
    <tbody>
        <tr class="sum">
            <td><input class="qty" type="text" value="1" /></td>
            <td>German format: </td>
            <td data_price="1375.5">1.375,50 &euro;</td>
            <td></td>
        </tr>
        <tr class="sum">
            <td><input class="qty" type="text" value="1" /></td>
            <td>English format:</td>
            <td data_price="1375.5">&euro;1,375.50</td>
            <td></td>
        </tr>
        <tr class="sum">
          <td><input name="text" type="text" class="qty" value="1" /></td>
          <td>French format:</td>
          <td data_price="1375.5">1 375,50 &euro;</td>
          <td></td>
        </tr>
        <tr class="sum">
          <td><input name="text2" type="text" class="qty" value="1" /></td>
          <td>Italian format:</td>
          <td data_price="1375.5">&euro;1,375.50</td>
          <td></td>
        </tr>
        <tr class="sum">
             <td><input class="qty" type="text" value="1" /></td>
             <td>Spanish format:</td>
            <td data_price="1375.5">&euro; 1.375,50</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">Total</td>
            <td id="total"></td>
        </tr>
    </tbody>
</table>

我希望使用属性“data_price”的值来计算此链接中的SUM: http://jsfiddle.net/QmTNZ/77/

我想在计算中只使用属性“data_price”而不是。

请帮助,我还是jquery的初学者:)

3 个答案:

答案 0 :(得分:6)

对于您的价格单元格,您应该使用以下格式:

<td data-price="1375.5">&euro;1,375.50</td>

即。用连字符,而不是下划线

然后您可以使用:

$('td').data('price')

访问其值 - 请参阅http://api.jquery.com/data

e.g。

var sum = 0;
$('.sum').each(function() {
    var q = parseFloat($(this).find('.qty').val());
    var p = parseFloat($(this).find('td').eq(2).data('price'));
    sum += q * p;
});
$('#total').text(sum);

http://jsfiddle.net/alnitak/gzYhN/

的工作演示

答案 1 :(得分:0)

尝试

var sum=0;
$('tbody > tr >  td[data_price]').each(
   function()
   {
      sum += parseFloat(this.attr('data_price'));
   }
);

答案 2 :(得分:0)

试试这个:http://jsfiddle.net/ptfKJ/

此示例使用的是原始HTML代码。