Ajax - 从PHP加载表后调用AJAX函数

Question

I am designing a shopping cart in which I have to calculate few figures using the table values.

I am loading table with AJAX and php (which works fine)

What the problem is : I want to call AJAX function after fetching the table. I want to add values of one column after the table has been fetched.

here is AJAX code :

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 code (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>";
?>

And I am calling showSummary() function on page load. Now what I want to do is, find average of columns : 'Rap. Price($)' & 'Discount(%)' and total of columns : 'Weight(Ct.)' & 'Price'

I tried calling ajax function on table's 's onload and failed.

Anyways, thank you in advance. :D

EDIT 1 :

I realized that row count works well but addition of values in the column isn't working.

The edited version of AJAX part is as follows :

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

Just call your showSummary() function by adding a script tag after your table.

You are already calling countSummary() when that call completes:

<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>