0

我有下表使用 Javascript 来计算单元格的总和。当输入 Javascript 时，总数量相加并将其显示在 TD id="totalSum" 中。

最终我需要在totalSum等于100时将它放在哪里，然后执行php代码。

如何让 PHP 读取 totalSum 中的数据，然后在等于 100 时执行 PHP？

HTML-

<table id="mytable" width="394">
    <colgroup>
        <col style="width: 50px;">
        <col>
        <col style="width: 60px;">
        <col style="width: 110px;">
    </colgroup>
    <tbody>
        <tr>
            <th  width="130" height="43"></th>
            <th width="52">Weight Select</th>
            <th width="181">New P</th>
        </tr>
        <tr>
            <td align="center" width="130">&nbsp;</td>
            <td align="center">
                <input type="text" size="2" value="1" id="qty_item_1" name="sum" >
            </td>
            <td align="center" id="total_item_1"></td>
        </tr>
        <tr>
             <td align="center" width="130"></td>
            <td align="center"  >
                <input type="text" size="2" value="1" id="qty_item_2" name="sum" >
            </td>
            <td align="center" id="total_item_2"></td>
        </tr>
        <tr class="tr">
            <td align="left" colspan="1"><strong>Grand Total:</strong></td>
            <td width="11" align="left" id="totalSum"></td>
        </tr>
    </tbody>
</table>

Javascript-

<script type="text/javascript">
    var bIsFirebugReady = (!!window.console && !!window.console.log);
    $(document).ready(function (){
        // update the plug-in version
        $("#idPluginVersion").text($.Calculation.version);

                                /*
                                $.Calculation.setDefaults({
                                onParseError: function(){
                                this.css("backgroundColor", "#cc0000")
                                }
                                , onParseClear: function (){
                                this.css("backgroundColor", "");
                                }
                                });
                                */
        // bind the recalc function to the quantity fields
        $("input[id^=qty_item_]").bind("keyup", recalc);

        // run the calculation function now
        recalc();

        // automatically update the "#totalSum" field every time
        // the values are changes via the keyup event
        $("input[name^=sum]").sum("keyup", "#totalSum");

        // automatically update the "#totalAvg" field every time
        // the values are changes via the keyup event
        $("input[name^=avg]").avg({
            bind:"keyup"
            , selector: "#totalAvg"
                // if an invalid character is found, change the background color
            , onParseError: function(){
                this.css("backgroundColor", "#cc0000")
            }
            // if the error has been cleared, reset the bgcolor
            , onParseClear: function (){
                this.css("backgroundColor", "");
            }
        });

        // automatically update the "#minNumber" field every time
        // the values are changes via the keyup event
        $("input[name^=min]").min("keyup", "#numberMin");

        // automatically update the "#minNumber" field every time
        // the values are changes via the keyup event
        $("input[name^=max]").max("keyup", {
            selector: "#numberMax"
            , oncalc: function (value, options){
                // you can use this to format the value
                $(options.selector).val(value);
            }
        });

        // this calculates the sum for some text nodes
        $("#idTotalTextSum").click(function() {
            // get the sum of the elements
            var sum = $(".textSum").sum();

            // update the total
            $("#totalTextSum").text("$" + sum.toString());
        });

        // this calculates the average for some text nodes
        $("#idTotalTextAvg").click(function() {
            // get the average of the elements
            var avg = $(".textAvg").avg();

            // update the total
            $("#totalTextAvg").text(avg.toString());
        });

    });

    function recalc(){
        $("[id^=total_item]").calc(
            // the equation to use for the calculation
            "qty * price / 100",
            // define the variables used in the equation, these can be a jQuery object
        {
            qty: $("input[id^=qty_item_]"),
            price: $("[id^=price_item_]")
        },

        // define the formatting callback, the results of the calculation are passed to this function
        function (s){
            // return the number as a dollar amount
            return "" + s.toFixed(2);
        },
            // define the finish callback, this runs after the calculation has been complete
            function ($this){
                // sum the total of the $("[id^=total_item]") selector
                var sum = $this.sum();
                $("#grandTotal").text(
                    // round the results to 2 digits
                    "" + sum.toFixed(2)
                );  
            }
        );
    }
</script>
4

1 回答 1

1

您的问题没有显示您如何触发对值求和或检查 cell 的值id="totalSum"，因此在我的解决方案中，我添加了一个按钮id="mybutt"来执行此操作。

在这里工作 jsFiddle

所有你需要知道的是上面的 jsFiddle，以及下面讨论some_php_file.php的部分。下面是对代码如何工作的描述，如果您需要的话。

  1. 首先，我们得到所有以id开头的表格单元格的集合qty_item：

    $('[id^=qty_item_]')

  2. 接下来，我们使用以下方法遍历这个集合.each：

    var ttl = 0;
    $('[id^=qty_item_]').each(function() {
        str = $(this).val();
        ttl += Number(str);
    });

  3. 然后，用id="totalSum"

    $('#totalSum').text(ttl).trigger('change');

请注意，我们change在同一个元素（表格单元格）上触发了一个事件。立即触发此代码：

$('#totalSum').change(function() {
    var sum = $(this).text();
    alert('Value: ' + sum);
    if (Number(sum) > 99) {
        alert('Value > 100. AJAX will begin, but cannot finish because jsFiddle cannot do ajax. Just look at syntax.').
        $.ajax({
            type: "POST",
            url: "some_php_file.php",
            data: 'myTotalSum='+sum,
            success:function(somedata){
                alert(somedata);
            }
        });
    }
});

在 AJAX 代码块中，请注意指定的 URL。服务器上必须存在同名的 PHP 文件（在本示例中，与您的 HTML 代码位于同一文件夹中）。它将在名为 的 POST 变量中接收通过 AJAX 发送的信息myTotalSum。

一旦你有了那个号码，你的 PHP 文件就可以把它存入数据库。如果需要，您甚至可以让 PHP 文件将信息发送回网页（它到达successAJAX 代码块的函数中）。请注意，网页上的 javascript 会继续处理，而无需等待PHP 页面完成。如果您需要 javascript 等待，那么您将插入async: false,该代码块顶部附近的某个位置。

要查看这是否真正起作用，请创建一个具有此名称和以下内容的文本文件：

some_php_file.php

<?php
    $theSum = $_POST['myTotalSum'];
    $r = '<h2>Mr. PHP received this number:</h2><h1>' .$theSum. '</h1>';
    echo $r;

echoPHP 文件中的 将变量的内容发送回$rAJAX 代码块，在success函数中接收它。重要提示：必须在此处处理此传入数据，而不能在其他地方处理。它不会存在于成功函数之外。

要在成功函数之外访问接收到的数据，请将接收到的数据粘贴到一个元素中，例如隐藏input元素，如下所示：

success:function(mydata){
    $('#a_hidden_input_element').val(mydata);
}

这是一个带有一些额外 AJAX 代码示例的 SO 帖子。

于 2013-08-30T19:42:19.027 回答