jquery动态添加的文本框的总和
jquery sum of dynamically added textboxes
我有一个页面，可以使用类为"prijs"的文本框添加和删除行。加载页面时，已经有一行了。
现在，我需要用类"prijs"对所有文本框的值求和，并将其显示在id为"totaalexbtw"的TD中。我的问题是：它不会在添加的文本框中循环。此外，当一个文本框被删除时，总数应该受到影响。
非常感谢您的帮助！！我被困了好几天！
提前感谢！
<html>
<head>
<script type="text/javascript" src="javascript/jquery_v2.0.3.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function kiesklant(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("klantinfo").innerHTML="<table><tr><td>Naam:</td><td</td></tr><td>Adres:</td><td></td></tr><td>Tel:</td><td></td></tr>";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("klantinfo").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "kiesklant.php?q="+str, true);
xmlhttp.send();
};
var linenumber = 0;
function addLine()
{
linenumber++;
var newRow = document.createElement('tr');
var newCell = document.createElement('td');
newCell = document.createElement('td');
var inputNode = document.createElement('input');
inputNode.name = 'dienstomschrijving';
inputNode.setAttribute('type', 'text');
inputNode.setAttribute('style', 'width: 200px');
newCell.appendChild(inputNode);
newRow.appendChild(newCell);
newCell = document.createElement('td');
inputNode = document.createElement('input');
inputNode.name = 'prijs';
inputNode.setAttribute('type', 'text');
inputNode.setAttribute('style', 'width: 100px');
inputNode.className = 'prijs';
newCell.appendChild(inputNode);
newRow.appendChild(newCell);
newCell = document.createElement('td');
inputNode = document.createElement('input');
inputNode.name = 'verwijder_dienst';
inputNode.setAttribute('type', 'button');
inputNode.setAttribute('onclick', 'delLine(this)');
inputNode.value = 'Verwijder dienst';
newCell.appendChild(inputNode);
newRow.appendChild(newCell);
document.getElementById('dienst').appendChild(newRow);
};
function delLine(line)
{
var row = line.parentNode.parentNode;
row.parentNode.removeChild(row);
};
function bereken()
{
var sumexbtw = $('.prijs').sum(function()
{
return +parseFloat(this.value) || 0;
});
$('#totaalexbtw').val(sumexbtw.toFixed(2));
var btw = sumexbtw * 0,21;
$('#btw').val(btw.toFixed(2));
var totaal = sumexbtw + btw;
$('#totaal').val(totaal.toFixed(2));
};
$(document).on('change', 'input.prijs', bereken);
</script>
</head>
<body>
<?php
include("function.php");
// haal max factuurnr op uit database
$sth1 = maakConnectie() -> prepare("SELECT MAX(factuurnummer) as 'max' FROM factuur");
$sth1 -> execute();
$result = $sth1 -> fetchAll(PDO :: FETCH_ASSOC);
// tel hier 1 bij op zodat er steeds opeenvolgende nummers worden genereerd
foreach($result as $rij)
{
$factuurnr = $rij['max'] + 1;
}
$datum = date("d-m-Y");
$sth2 = maakConnectie() -> prepare("SELECT voornaam, achternaam FROM gebruiker");
$sth2 -> execute();
$result2 = $sth2 -> fetchAll (PDO::FETCH_ASSOC);
?>
<form method="GET" action="aanmaken_factuur.php" class="formulier">
<table>
<tr>
<td>Factuur nr:</td>
<td align="right"><?php print($factuurnr);?></td>
</tr>
<tr>
<td>Datum:</td>
<td align="right"><?php print($datum);?></td>
</tr>
</table>
<br>
<table>
<tr>
<td><select name="klanten" onchange="kiesklant(this.value)">
<option value="" selected>Kies klant</option>
<?php foreach($result2 as $rij)
{
print("<option value='"".$rij["voornaam"]." ".$rij["achternaam"]."'">".$rij["voornaam"]." ".$rij["achternaam"]."</option>");
}?>
</select>
</td>
</tr>
</table>
<div id="klantinfo">
<table>
<tr>
<td>Naam:</td>
<td></td>
</tr>
<tr>
<td>Adres:</td>
<td></td>
</tr>
<tr>
<td>Tel:</td>
<td></td>
</tr>
</table>
</div>
<br>
<table id="dienst2">
<tbody id="dienst">
<tr>
<th align="left">Dienstomschrijving</th>
<th align="left">Prijs</th>
</tr>
<tr>
<td><input style="width: 200px" type="text" name="dienstomschrijving"></td>
<td><input style="width: 100px" type="text" name="prijs" class="prijs"></td>
<td><input type="button" name="verwijder_dienst" value="Verwijder dienst" onclick="delLine(this);"/></td>
</tr>
</tbody>
<tr>
<td><input type="button" name="toevoegen_dienst" value="Voeg dienst toe" onclick="addLine();" /></td>
</tr>
</table><br>
<table id="totaal">
<tr>
<td align="right">Totaal excl. BTW</td>
<td align="center" id="totaalexbtw"></td>
</tr>
<tr>
<td align="right">BTW 21%</td>
<td align="center" id="btw"></td>
</tr>
<tr>
<td colspan=2 align="center">_________________________________________</td>
</tr>
<tr>
<td align="right">Factuur totaal</td>
<td align="center" id="totaal"></td>
</tr>
<tr>
<td align="right"><button onclick="index2.php" name="annuleren">Annuleren</button></td>
<td align="right"><input type="submit" name="submit" value="Maak factuur aan"></td>
</tr>
</table>
</form>
您的代码中有两个错误
$('.prijs').each.change(berekentotaalexbtw());
^^^^ ^^
不需要使用每一个，你不是在分配函数，而是在调用它。
$('.prijs').change(berekentotaalexbtw);
因为我昨天刚刚做了同样的事情：
(function($) {
$.fn.sum = function (callback) {
var sum = 0;
this.each(function () {
sum += 1 * callback.apply(this);
});
return sum;
};
})(jQuery);
这只是一个辅助函数，因此您可以执行：$（'.prijs'）.sum（….）；而不是使用.each（….）
这是你的答案
// If you do $('.prijs').change() it binds it to the currently existing elements.
// i think you are adding and deleting them dynamically, so you needed a delegated event.
function berekentotaalexbtw() {
var sum = $('.prijs').sum(function() {
// just a shorter version of all the 'isNan' stuff you got going on.
// defaults to 0 if it's NaN
return +parseFloat(this.value) || 0;
});
// Since you want it printed like a currency: use sum.toFixed(2) to format it :-)
$('#totaalexbtw').val( sum.toFixed(2) );
}
$(document).on('change','input.prijs',berekentotaalexbtw);
// and on deletion of an element: berekentotaalexbtw();
相关文章：
- Javascript，将文本添加到具有现有文本节点的元素中
- 选中单选框时，将文本添加到文本框中
- 为未标记的文本添加CSS样式
- 如何将表格中的文本添加到使用按钮输入的文本区域
- 有没有办法将mouseOver上的个人文本添加到完整日历中
- 改变“;onClick"这个jQuery的操作从清除输入文本改为将输入文本添加到下面的列表中
- 如何使用JavaScript将链接文本添加到电子邮件中
- 将动态验证文本添加到自定义jQuery验证规则中
- 将文本添加到每个数组元素的开头
- 单击将按钮中的文本添加到带有jQuery或JS的输入框中
- 通过按钮将不同的文本添加到文本区域-不起作用
- 如何为Fabric.js中的文本添加CSS属性
- 如何将预加载程序文本添加到jQuery Cycle 2中
- Javascript Regex exec 在向搜索文本添加属性/引号后冻结
- 如何在所有浏览器中向文本区域中的选定文本添加 标记
- jQuery将文本添加到放置在表格单元格中的图像中
- D3 垂直条形图为标签文本添加换行符
- 单击时从列表中将文本添加到文本框的方法
- 将文本添加到 D3 圆环图的中心
- 如何将非可变文本添加到javascript打印弹出窗口中
