如果表格单元格等于100则

时间:2013-08-30 18:20:40

标签: javascript php html-table

我有下表使用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>

1 个答案:

答案 0 :(得分:1)

您的问题未显示如何触发总结值或检查单元格id="totalSum"的值,因此在我的解决方案中,我添加了一个按钮id="mybutt"来执行此操作。

Working jsFiddle here

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


  1. 首先,我们获取idqty_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');

  4. 请注意,我们会在同一元素(表格单元格)上触发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代码位于同一文件夹中)。它将在名为myTotalSum的POST变量中接收通过AJAX发送的信息。

    获得该号码后,您的PHP文件就可以将其粘贴到数据库中。如果需要,您甚至可以让PHP文件将信息发送回网页(它到达AJAX代码块的success功能)。请注意,网页上的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;
    

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

    要访问成功函数之外的已接收数据,请将接收的数据粘贴到元素中,例如隐藏的input元素,如下所示:

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

    Here is an SO post以及一些额外的AJAX代码示例。