我正在设计一个购物车，其中我必须使用表值计算一些数字。
我正在使用 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() 函数。
现在我想做的是，找到列的平均值:“Rap”。价格($)' & '折扣(%)'
总列数:“重量(克拉)”和“价格”
我尝试在表的 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>
关于javascript - Ajax - 从 PHP 加载表后调用 AJAX 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45229659/