2017-07-21 32 views
1

私はテーブル値を使用して数を計算するショッピングカートを設計しています。私はテーブルを取得した後、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); 
     } 
    } 

答えて

0

ちょうどあなたのテーブルの後にscriptタグを追加して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> 
+0

私はすでにshowSummary()を呼び出しています。<ボディのonload = "showSummary();"> –

関連する問題