CODEWITHSUNDEEP
javascriptjquery
Dali
Dali

Reputation: 7882

Calculate the sum of products using a td attribute

I have this table : 

<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>

and I want to use the value of attribute "data_price" to calculate the SUM like in this link : http://jsfiddle.net/QmTNZ/77/

I want to use only the attribute "data_price" in calculation and not the .

Please help, I'm still beginner in jquery :)

Upvotes: 6

Views: 4137

Answers (3)

Alnitak
Alnitak

Reputation: 340055

For your price cells, you should use this format:

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

i.e. with a hyphen, not underscore

You can then use:

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

to access its value - see 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);

Working demo at http://jsfiddle.net/alnitak/gzYhN/

Upvotes: 6

Igor Dymov
Igor Dymov

Reputation: 16480

Try this: http://jsfiddle.net/ptfKJ/

This example is using your original HTML code.

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176956

Try

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

Upvotes: 0

Related Questions