我有下表使用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"> </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>
答案 0 :(得分：1)
您的问题未显示如何触发总结值或检查单元格id="totalSum"的值，因此在我的解决方案中，我添加了一个按钮id="mybutt"来执行此操作。
您需要知道的是上面的jsFiddle，以及下面讨论 some_php_file.php 的部分。以下是对代码如何工作的描述，如果需要的话。
首先，我们获取id以qty_item开头的所有表格单元格的集合：
$('[id^=qty_item_]')
接下来，我们使用.each方法迭代此集合：
var ttl = 0;
$('[id^=qty_item_]').each(function() {
str = $(this).val();
ttl += Number(str);
});
然后，使用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代码示例。