Делаете математику на динамической 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;
  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 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>

javascript jquery html ajax math

0

Bell

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

Вам нужно использовать .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 = '';
  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;
    //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;
  $(".highlight").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>

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

2 ответа

Новые вопросы

javascript