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()函数。现在我想要做的是，找到列的平均值：＆＃39; Rap。价格（$）＆＃39; ＆安培; ＆＃39;折扣（％）＆＃39; 和总列数：＆＃39;重量（Ct。）＆＃39; ＆安培; ＆＃39;价格＆＃39;

我尝试在桌面上调用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>

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

1 个答案: