我正在设计一个购物车,其中必须使用表值来计算几个数字。
我正在用AJAX和php加载表(工作正常)
问题是什么:我想在获取表后调用AJAX函数。
我想在获取表后添加一列的值。
这是AJAX代码:
function showSummary() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("summary_data").innerHTML = this.responseText;
countSummary();
}
};
xmlhttp.open("GET","fetch_summary.php",true);
xmlhttp.send();
}
function countSummary(){
var cls = document.getElementById("shopping_cart").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++){
if(cls[i].className == "countable"){
sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
}
}
alert('sum is ' + sum);
}
<table class="table table-hover" id="shopping_cart">
<thead class="thead-default">
<tr valign="middle">
<th><center>Stone</center></th>
<th><center>Shape</center></th>
<th><center>Weight(Ct.)</center></th>
<th><center>Rap. Price($)</center></th>
<th><center>Discount(%)</center></th>
<th><center>Price</center></th>
<th></th>
</tr>
</thead>
<tbody id="summary_data" onload="countSummary();">
</tbody>
</table>
PHP代码(fetch_summary.php):
<?php
session_start();
echo "<tr valign=\"middle\">
<td class=\"align-middle\"><center>D VVS1</center></td>
<td class=\"align-middle\"><center>Round</center></td>
<td class=\"align-middle\"><center>2.01</center></td>
<td class=\"countable align-middle\"><center>1800</center></td>
<td class=\"align-middle\"><center>-43%</center></td>
<td class=\"align-middle\"><center>25000$</center></td>
<td class=\"align-middle\">
<center>
<button class=\"btn btn-outline-danger btn-sm\" onclick=\"removeItem(this);\">
<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>
</button>
</center>
</td>
</tr>
<tr valign=\"middle\">
<td class=\"align-middle\"><center>D VVS1</center></td>
<td class=\"align-middle\"><center>Pear</center></td>
<td class=\"align-middle\"><center>2.01</center></td>
<td class=\"countable align-middle\"><center>1800</center></td>
<td class=\"align-middle\"><center>-43%</center></td>
<td class=\"align-middle\"><center>25000$</center></td>
<td class=\"align-middle\">
<center>
<button class=\"btn btn-outline-danger btn-sm\" onclick=\"removeItem(this);\">
<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>
</button>
</center>
</td>
</tr>
<tr valign=\"middle\">
<td class=\"align-middle\"><center>D VVS1</center></td>
<td class=\"align-middle\"><center>Emerald</center></td>
<td class=\"align-middle\"><center>2.01</center></td>
<td class=\"countable align-middle\"><center>1800</center></td>
<td class=\"align-middle\"><center>-43%</center></td>
<td class=\"align-middle\"><center>25000$</center></td>
<td class=\"align-middle\">
<center>
<button class=\"btn btn-outline-danger btn-sm\" onclick=\"removeItem(this);\">
<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>
</button>
</center>
</td>
</tr>
<tr valign=\"middle\">
<td class=\"align-middle\"><center>D VVS1</center></td>
<td class=\"align-middle\"><center>Emerald</center></td>
<td class=\"align-middle\"><center>2.01</center></td>
<td class=\"countable align-middle\"><center>1800</center></td>
<td class=\"align-middle\"><center>-43%</center></td>
<td class=\"align-middle\"><center>25000$</center></td>
<td class=\"align-middle\">
<center>
<button class=\"btn btn-outline-danger btn-sm\" onclick=\"removeItem(this);\">
<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>
</button>
</center>
</td>
</tr>
<tr valign=\"middle\">
<td class=\"align-middle\"><center>D VVS1</center></td>
<td class=\"align-middle\"><center>Emerald</center></td>
<td class=\"align-middle\"><center>2.01</center></td>
<td class=\"countable align-middle\"><center>1800</center></td>
<td class=\"align-middle\"><center>-43%</center></td>
<td class=\"align-middle\"><center>25000$</center></td>
<td class=\"align-middle\">
<center>
<button class=\"btn btn-outline-danger btn-sm\" onclick=\"removeItem(this);\">
<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>
</button>
</center>
</td>
</tr>
<tr valign=\"middle\">
<td class=\"align-middle\"><center>D VVS1</center></td>
<td class=\"align-middle\"><center>Emerald</center></td>
<td class=\"align-middle\"><center>2.01</center></td>
<td class=\"countable align-middle\"><center>1800</center></td>
<td class=\"align-middle\"><center>-43%</center></td>
<td class=\"align-middle\"><center>25000$</center></td>
<td class=\"align-middle\">
<center>
<button class=\"btn btn-outline-danger btn-sm\" onclick=\"removeItem(this);\">
<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>
</button>
</center>
</td>
</tr>";
?>
我在页面加载时调用
showSummary()
函数。现在我想做的是,找到平均列:'说唱。价格($)和折扣(%)
列总数:“重量(英尺)”和“价格”
我尝试在表的onload上调用ajax函数,但失败了。
无论如何,先谢谢您。 :D
编辑1:
我意识到行计数效果很好,但是在列中添加值不起作用。
AJAX部分的编辑版本如下:
function countSummary(){
if($('table tbody > tr').length > 0){
var cls = document.getElementById("shopping_cart").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++){
if(cls[i].className == "countable"){
sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
}
}
alert("IF : "+$('table tr').length+" Sum : "+sum);
}
else {
alert("else : "+$('table tr').length);
}
}
最佳答案
只需在表后添加脚本标签即可调用showSummary()
函数。
呼叫完成后,您已经在呼叫countSummary()
:
<table class="table table-hover" id="shopping_cart">
<thead class="thead-default">
<tr valign="middle">
<th><center>Stone</center></th>
<th><center>Shape</center></th>
<th><center>Weight(Ct.)</center></th>
<th><center>Rap. Price($)</center></th>
<th><center>Discount(%)</center></th>
<th><center>Price</center></th>
<th></th>
</tr>
</thead>
<tbody id="summary_data">
</tbody>
</table>
<script>
showSummary();
</script>