私はテーブル値を使用して数を計算するショッピングカートを設計しています。私はテーブルを取得した後、AJAX機能を呼び出したい:Ajax - PHPからテーブルをロードした後にAJAX関数を呼び出す
私はこの問題は何ですか
(正常に動作します)AJAXとPHPを使用してテーブルをロードしています。 テーブルがフェッチされた後に1つの列の値を追加したいとします。
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):ここ
は、AJAXコードである
<?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()
関数を呼び出しています。 今私がしたいのは、列の平均を見つけることです:「ラップ。価格($) "& 'の割引(%)' と列の合計: '(。CT)重' & '価格'
私はテーブルの上でAJAX機能を呼び出すことを試みたのonloadイベントと失敗しました。
とにかく、ありがとうございます。 :D
EDIT 1:
Iは、行カウントがうまく機能することを理解が、列の値の加算が動作していません。次のように
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()を呼び出しています。<ボディのonload = "showSummary();"> –