JQuery Ajax :购物车项目中的更改应该更改总价值



我正在用 PHP jquery 创建一个购物车,购物车有重量和数量的下拉选项,我需要一个解决方案,在这些下拉列表中更改应该更改产品的总价格...我做到了,但代码更改了所有列,我只需要更改价格列。有什么解决办法吗?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sum Total for Column in jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<thead>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>Total:</td>
</tr>
</tfoot>
</table>
</body>
</html>

产品总数

你应该修改你的代码,在你的脚本中使用子项:

$(this).children('td:nth-child(8)').text(total);

第 n 个子项 (8( = 8 是 TD 列值。

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sum Total for Column in jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var total = [];
$('table thead th').each(function(i) {
total.push(calculateColumn(i));
});
console.log(total);
var totalFruits = 0;
for (var i in total) {
totalFruits += total[i] ;
}
console.log(totalFruits);
$('#total').text('Total: ' + totalFruits);
});

function calculateColumn(index) {
var count = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
count +=value;
}
});
return count;
}

</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<thead>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" id="total">Total:</td>
</tr>
</tfoot>
</table>
</body>
</html>

最新更新