当谈到编码时,我是一个极端的新手,但无论如何,它都会出现。我有一个表,它的前两列是从MySQL数据库中填充的,每行都有一个文本框供用户输入。然后将其写回数据库。这很好,我需要从用户输入的每个文本框中获得总数,然后从页面前面的另一个文本框中减去。我需要得到预算金额输入字段的总和。
这是我的表格代码:
<span id="sum">0</span>
<?php
$result = mysqli_query($con,"SELECT envelopename, envelopebudget FROM envelopes");
echo "<table border='1' id='table_new_paycheck'>
<tr>
<th>Envelope</th>
<th>Budget</th>
<th>Amount</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<input type='hidden' value='$row[envelopename]' name='envelopename[]'/>";
echo "<tr>";
echo "<td>" . $row['envelopename'] . "</td>";
echo "<td>" . $row['envelopebudget'] . "</td>";
?><td><input type="text" name="budgetamount[]" class="textboxone"></td><?php;
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?><br>
以下是我尝试过的jquery脚本,但它不起作用:
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".textboxone").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".textboxone").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
我试着使用jquery,认为这会在他们为每个文本框键入值时给我即时回复,但我不知道该怎么做。这是我想要的一个例子,但我无法调整它来使用我的数组。下面是一个我想要的例子。它涵盖了添加部分。
谢谢你的帮助。
将keyup处理程序直接应用于返回的jQuery对象似乎效果良好。
我对Newtt制作的Fiddle进行了更新,我认为它将实现您想要的目标。
http://jsfiddle.net/Lseg900t/2/
使用parseInt()
:时,请注意第二个参数"10"
sum += parseInt($(this).val(), 10);
这样可以确保返回一个以10为基数的整数。如果你没有明确告诉它使用base-10,如果用户输入"012",这将被解释为Octal(base-8),并且在base-10中的值为10,这可能不是你想要的。
编辑:另外请注意,我没有进行您所做的任何NaN检查。
EDIT:除非另有指定,否则parseInt现在默认为基数10,最好是显式并提供参数。
我进一步调整了Fiddle,允许您提到的其他用户输入。请在此处查看更新http://jsfiddle.net/Lseg900t/3/