在Javascript中对动态HTML表格进行数学运算吗？

问题描述 投票：0回答：3

我想对我拥有的动态HTML表进行一些基本数学运算，该表具有通过Ajax加载到表中的JSON数据。

[当我尝试parseFloat时，代码可以工作，但是会从我的数字中删除小数位。这是要成为餐厅帐单应用程序，因此小数点很重要。 （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>
javascript jquery html ajax math
3个回答
0
投票

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>

每次选择一行，对选定的行进行迭代并计算总和。

0
投票

您需要使用.text并找到使用类代替需要唯一的ID

如果只希望带有复选框的行，则可以执行类似操作

$(".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>
0
投票

在这种情况下，我建议使用Vue.js而不是jQuery。无需在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/[email protected]/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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.