网站 一般 用什么空间,大一网页设计电商网站作业,做网站的业务逻辑,从化定制型网站建设一、监听行内文本框#xff0c;进行行内数据修改
效果
修改数量、单价会自动计算金额#xff08;金额数量*单价#xff09; 实现
1、增加行的class 2、数据监听、修改数值
initComplete: function() {// 监听数量和单价输入框的变化$(document).on(input, .…一、监听行内文本框进行行内数据修改
效果
修改数量、单价会自动计算金额金额数量*单价 实现
1、增加行的class 2、数据监听、修改数值
initComplete: function() {// 监听数量和单价输入框的变化$(document).on(input, .quantity, .price, function() {var row $(this).closest(tr);var quantity parseFloat(row.find(.quantity).val()) || 0;var price parseFloat(row.find(.price).val()) || 0;var lineAmount quantity * price;// 更新金额输入框row.find(.line_amount).val(lineAmount.toFixed(2));});}
解决新增行或删除行数据丢失
initComplete: function() {$(document).on(input, .quantity, .price, function() {var row $(this).closest(tr);var quantity parseFloat(row.find(.quantity).val()) || 0;var price parseFloat(row.find(.price).val()) || 0;var lineAmount quantity * price;// 更新金额输入框row.find(.line_amount).val(lineAmount.toFixed(2));// 更新 allData 数组中的 line_amountvar rowIndex row.index();let allData table.rows().data().toArray();allData[rowIndex].line_amount lineAmount.toFixed(2);});
} 二、计算行总和
效果
方法一遍历求和 遍历全部金额特有的选择器这里使用的是classline_amount进行累加
initComplete: function() {// 获取总金额function getallcount() {var total 0;//遍历所有classline_amount的值进行累加$(.line_amount).each(function() {var amount parseFloat($(this).val());if (!isNaN(amount)) {total amount;}});console.log(total)}
}
在需要的地方进行引用
例如
initComplete: function() {$(document).on(input, .quantity, .price, function() {var row $(this).closest(tr);var quantity parseFloat(row.find(.quantity).val()) || 0;var price parseFloat(row.find(.price).val()) || 0;var lineAmount quantity * price;// 更新金额输入框row.find(.line_amount).val(lineAmount.toFixed(2));// 更新 allData 数组中的 line_amountvar rowIndex row.index();let allData table.rows().data().toArray();allData[rowIndex].line_amount lineAmount.toFixed(2);// 更新总和getallcount();});
}
方法二使用DataTable的draw 事件
var table $(#mytable).DataTable({// ... 其他配置 ...initComplete: function(settings, json) {// ... 初始化代码 ...// 绑定 draw 事件table.on(draw, function() {var api this.api();//例如获取第列的总和var total api.column(7).data().reduce(function(a, b) {return a (b ? parseFloat(b) : 0);}, 0);console.log(total.toFixed(2));});}
});
