Doing Math On A Dynamic Html Table In Javascript?

I want to do some basic math on a Dynamic Html Table that I have which uses JSON data loaded via ajax. When I try to parseFloat, the code works, however it strips the decimal plac

Solution 1:

You need to use .text and find using classes instead of IDs which need to be unique

If you only want the rows with the checked boxes, you can do something like

$(".highlight td .double:checked").each

Here is working code

const data = [ 
  {pk: 1, Description: "Pizza", Price: "50.00"},
  {pk: 2, Description: "Hamburger", Price: "60.00"},
  {pk: 3, Description: "Coca Cola", Price: "20.00"},
  {pk: 4, Description: "Fanta", Price: "20.00"},
  {pk: 5, Description: "Corona", Price: "30.00"},
  {pk: 6, Description: "Steak", Price: "100.00"}
]

functionshowTable(data) {
  var tbl = document.getElementById("food_table")
  var table_data = '';
  for (i = 0; i < data.length; i++) {
    table_data += '<tr class="contentRow">';
    table_data += '<td>' + data[i].pk + '</td>';
    table_data += '<td>' + data[i].Description + '</td>';
    table_data += '<td class="price">' + 'R<span>' + data[i].Price + '</span></td>';
    table_data += '<td><input class="double" type="checkbox" /></td>';
    table_data += '</tr>';
  }
  tbl.insertAdjacentHTML('afterbegin', table_data);
  tbl.insertAdjacentHTML('beforeend', '<tr>Total Bill = R<span id="total">0.00</span></tr>');
}

$(function() {
  $("#food_table").on('click', '.contentRow', function() {
    $(this).toggleClass("highlight");
    var total = 0;
    $(".highlight").each(function() {
      total += +$(this).find(".price>span").text();
    });
    $("#total").text(total.toFixed(2))
  });

  $("#food_table").on('click', '.double', function() {
    var total = 0;
    $(".double:checked").each(function() {
      total += +$(this).find(".price>span").text();
    });
    $("#total").text(total.toFixed(2))
  });

  showTable(data);
});

.highlight {
  background-color: yellow
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tableclass="table"id="food_table"><thead><tr><th>pk</th><th>Description</th><th>Price</th><th></th></tr></thead></table>

Solution 2:

const data = [ 
{pk: 1, Description: "Pizza", Price: "50.00"},
{pk: 2, Description: "Hamburger", Price: "60.00"},
{pk: 3, Description: "Coca Cola", Price: "20.00"},
{pk: 4, Description: "Fanta", Price: "20.00"},
{pk: 5, Description: "Corona", Price: "30.00"},
{pk: 6, Description: "Steak", Price: "100.00"}
]



functionshowTable(data) {
  var tbl = document.getElementById("food_table")
  var table_data = '';
  var total = 0.00;
  var x = 0;
  for (i = 0; i < data.length; i++) {
    //To find the total value of the bill!
    total = Number.parseFloat(x) + total;
    console.log(total);
    //To create the rows from JSON Object
    table_data += '<tr class="contentRow">';
    table_data += '<td>' + data[i].pk + '</td>';
    table_data += '<td>' + data[i].Description + '</td>';
    table_data += '<td class="price">' + 'R' + '<span>' + data[i].Price + '</span></td>';
    table_data += '<td><input class="double" type="checkbox" /></td>';
    table_data += '</tr>';
  }
  tbl.insertAdjacentHTML('afterbegin', table_data);
  tbl.insertAdjacentHTML('beforeend', '<tr>Total Bill = R<span id="total">' + total + '</span></tr>');
}

$("#food_table").on('click', '.contentRow', function() {
  $(this).toggleClass("highlight");
  var total = 0;
  $("#food_table").find('.contentRow').each(function(){
    if($(this).hasClass('highlight')){
      total += parseFloat($(this).find('.price>span').text());
    }
  })
  $('#total').text(total);
});

showTable(data);

.highlight{
  background-color:orange;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tableclass="table "id="food_table"><thead><tr><th>pk</th><th>Description</th><th>Price</th><th></th></tr></thead></table>

Each time a row is selected, iterate over the selected rows and calculate the sum.

Solution 3:

I would suggest to use Vue.js instead of jQuery for this case. Instead of manipulating with DOM nodes in Vue.js you just need to create view model and bind it to a template.

<!DOCTYPE html><html><head><style>.highlighted {background: lightyellow}
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
    </style></head><body><divid="app"><table><thead><tr><th>pk</th><th>Description</th><th>Price</th><th></th></tr></thead><tbody><trv-for="item in items"v-bind:key="item.pk" @click="itemClick(item)":class="rowClass(item)"><td>{{item.pk}}</td><td>{{item.Description}}</td><td>{{item.Price}}</td><td><inputtype="checkbox"v-model="item.selected" /></td></tr></tbody></table><span>Total: {{total}}</span></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script><script>newVue({
    el: '#app',
    data() {
        return {
            items: [
                {pk: 1, Description: "Pizza", Price: "50.00", selected: false},
                {pk: 2, Description: "Hamburger", Price: "60.00", selected: false},
                {pk: 3, Description: "Coca Cola", Price: "20.00", selected: false},
                {pk: 4, Description: "Fanta", Price: "20.00", selected: false},
                {pk: 5, Description: "Corona", Price: "30.00", selected: false},
                {pk: 6, Description: "Steak", Price: "100.00", selected: false}
            ]
        }
    },
    computed: {
        total() {
            const result = this.items
                .filter(item => item.selected)
                .map(item =>Number(item.Price))
                .reduce((a, b) => a + b, 0)
            return result.toFixed(2);
        }
    },
    methods: {
        rowClass(item) {
            return item.selected ? "highlighted" : "";
        },
        itemClick(item) {
            item.selected = !item.selected;
        }
    }
});
</script></body></html>