在Javascript中的动态HTML表格上做数学运算? [英] Doing Math on a Dynamic Html Table in Javascript?
问题描述
我想对我拥有的动态HTML表做一些基本的数学运算，该表使用通过Ajax加载的JSON数据.
I want to do some basic math on a Dynamic Html Table that I have which uses JSON data loaded via ajax.
当我尝试parseFloat时，代码可以工作，但是会从我的数字中去除小数位.我希望这是一个餐厅账单申请，所以小数点很重要. parseFloat.toFixed(2)也不起作用.
When I try to parseFloat, the code works, however it strips the decimal places from my numbers. I want this to be a restaurant bill application, so the decimals are important. parseFloat.toFixed(2) doesn't work either.
除此之外，我希望能够仅选择几行以将添加的内容作为小计.我可以选择单击的行以突出显示它们.突出显示后，我可以使用if语句查看哪些行具有切换的类突出显示"，然后从那里进行计算.有谁知道一种更有效的方法?
Besides that, I want to be able to select only a few of the rows to have the addition done as a subtotal. I can select the rows on click to highlight them. Once highlighted I could use a if statement to see which rows have the toggled class "Highlighted" and then do the calculation from there. Does anyone know of a more efficient way to do this?
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>
推荐答案
在这种情况下，我建议使用Vue.js而不是jQuery.无需在Vue.js中处理DOM节点，只需创建视图模型并将其绑定到模板即可.
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>
<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>
这篇关于在Javascript中的动态HTML表格上做数学运算?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
