Делаете математику на динамической HTML-таблице в Javascript?

Question

Я хочу сделать некоторую базовую математику в моей динамической HTML-таблице, которая использует данные JSON, загруженные через ajax.

Когда я пытаюсь разобрать Float, код работает, однако он удаляет десятичные разряды из моих чисел. Я хочу, чтобы это было приложение для счета в ресторане, поэтому важны десятичные дроби. parseFloat.toFixed(2) тоже не работает.

Кроме того, я хочу иметь возможность выбрать только несколько строк, чтобы сложение было выполнено в качестве промежуточной суммы. Я могу выбрать строки по щелчку, чтобы выделить их. После выделения я мог бы использовать оператор if, чтобы увидеть, какие строки имеют переключаемый класс «Выделенный», а затем выполнить вычисление оттуда. Кто-нибудь знает более эффективный способ сделать это?

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"}
]



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

$("#food_table").on('click', '#contentRow', function() {
  $(this).toggleClass("highlight");
});

showTable(data);

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

Answer 1

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"}
]



function showTable(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;
}

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

Каждый раз при выборе строки перебирайте выбранные строки и вычисляйте сумму.

Answer 2

Я бы предложил использовать Vue.js вместо jQuery для этого случая. Вместо того чтобы манипулировать DOM-узлами в Vue.js, вам просто нужно создать модель представления и связать ее с шаблоном.

<!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>
  <div id="app">
    <table>
        <thead>
            <tr>
                <th>pk</th>
                <th>Description</th>
                <th>Price</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr v-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>
                    <input type="checkbox" v-model="item.selected" />
                </td>
            </tr>
        </tbody>
    </table>
    <span>Total: {{total}}</span>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
new Vue({
    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>

Answer 3

Вам нужно использовать .text и найти использование классов вместо идентификаторов, которые должны быть уникальными

Если вы хотите, чтобы строки были только отмечены, вы можете сделать что-то вроде

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

Вот рабочий код

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"}
]

function showTable(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
}

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