CODEWITHSUNDEEP
javascriptjquerycount
Alex
Alex

Reputation: 1309

JQuery / Javascript count data-(sort) values

Having a small thing here. I have a table with bookings

<tr class="booking">
    <td>00234</td>
    <td onclick="window.location=('https://www.exmple.com/booking/view=777');" data-sort="64.99" class="price">
    €64,99
    </td>
</tr>

Now I would like JQuery to iterate through all td.price fields and obtain the data-sort"" value

I have tried the following:

var amount = 0;

$("#booking_table > tbody > > tr > td > data['data-sort']").each(function () {
    amount += parseFloat($(this).val());
});

But this is not working. (logically because I don't know how to approach the data-sort value. But there should be a way.

Answer by Martin

var amount = 0;

$("#booking_table > tbody > tr > .price[data-sort]").each(function () {
    amount += parseFloat($(this).data('sort'));
});

Upvotes: 0

Views: 56

Answers (3)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

You can easly use $("#booking_table td[data-sort]").each(function() { ... and make calculation ,

beacause in your case you're using > means direct children of a parent .

$(function() {
  let amount = 0;
  $("#booking_table td[data-sort]").each(function() {
    //console.log($(this).data('sort'));
    amount += parseFloat($(this).data('sort'));
  });
 alert("amount ="+  amount); 
  
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="booking_table" border="1px solid ">
  <tbody>
    <tr class="booking">
      <td>00234</td>
      <td onclick="window.location=('https://www.exmple.com/booking/view=777');" data-sort="64.99" class="price">
        €64,99
      </td>
    </tr>
    <tr class="booking">
      <td>00235</td>
      <td onclick="window.location=('https://www.exmple.com/booking/view=777');" data-sort="23.99" class="price">
        €23,99
      </td>
    </tr>
    <tr class="booking">
      <td>00236</td>
      <td onclick="window.location=('https://www.exmple.com/booking/view=777');" data-sort="76.99" class="price">
        €76,99
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Martin
Martin

Reputation: 16433

This is only because you have a slight problem in your selector.

The selector you were using isn't correct:

#booking_table > tbody > > tr > td > data['data-sort']

You instead want:

#booking_table > tbody > tr > td[data-sort]


var amount = 0;

$("#booking_table > tbody > tr > td[data-sort]").each(function() {
    amount += $(this).data('sort');
});

console.log(amount)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="booking_table">
  <tbody>
    <tr class="booking">
        <td>00234</td>
        <td onclick="window.location=('https://www.exmple.com/booking/view=777');" data-sort="64.99" class="price">
        €64,99
        </td>
    </tr>
  </tbody>
</table>

Upvotes: 2

fefoweb
fefoweb

Reputation: 61

Maybe, as i cannot know your html selector, can be

$('#booking_table > tr.booking > td[data-sort]').each(function () {
   amount += parseFloat($(this).val());
});

Upvotes: 1

Related Questions