Ajax - 從PHP中加載表後調用AJAX函數

Question

我正在設計一個購物車，其中我必須使用表值計算幾個數字。

我加載表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()功能。 現在我想要做的是找到列的平均值：'說唱。價格（$）「& '折扣（％）' 和總列： '重量（克拉）' & '價格'

想拜訪表的Ajax功能的onload事件和失敗。

反正，先謝謝你。 ：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); 
     } 
    } 

Answer 1

通過你的表後添加腳本標籤就叫你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>