如果表格單元格等於100，然後

Question

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

Answer 1

您的問題不告訴你如何觸發總結的值，或檢查細胞id="totalSum"的價值，所以在我的解決方案我增加了一個按鈕id="mybutt"來做到這一點。

Working jsFiddle here

所有你需要知道的是，在上述的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代碼相同的文件夾中）。它將通過名爲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代碼示例。