javascript - 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() 函数。现在我想做的是，找到列的平均值:“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);
        }
    }

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>