我在这个网站上找到了一个用于更新表行的 jquery 函数。现在我需要该列的总计。有人吗?我不熟悉 jquery,尝试了很多东西,但没有成功。
fiddle :http://jsfiddle.net/heliosh/r7dvay4o/
JS
$(document).ready(function () {
function updateArticle1() {
var Persons = parseFloat($("#dare_price1").val());
var total = (Persons) * 2.00;
var total = total.toFixed(2);
$("#total_price_amount1").val(total);
}
$(document).on("change, keyup", "#dare_price1", updateArticle1);
});
$(document).ready(function () {
function updateArticle2() {
var Animals = parseFloat($("#dare_price2").val());
var total = (Animals) * 3.50;
var total = total.toFixed(2);
$("#total_price_amount2").val(total);
}
$(document).on("change, keyup", "#dare_price2", updateArticle2);
});
$(document).ready(function () {
function updateArticle3() {
var Bedlinen = parseFloat($("#dare_price3").val());
var total = (Bedlinen) * 8.50;
var total = total.toFixed(2);
$("#total_price_amount3").val(total);
}
$(document).on("change, keyup", "#dare_price3", updateArticle3);
});
$(document).ready(function () {
function updateArticle4() {
var Towels = parseFloat($("#dare_price4").val());
var total = (Towels) * 7.50;
var total = total.toFixed(2);
$("#total_price_amount4").val(total);
}
$(document).on("change, keyup", "#dare_price4", updateArticle4);
});
HTML
<table>
<tr>
<td>Persons?</td>
<td>
<input class="span4 input-big" id="dare_price1" name="Persons" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Animals?</td>
<td>
<input class="span4 input-big" id="dare_price2" name="Animals" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Bedlinen?</td>
<td>
<input class="span4 input-big" id="dare_price3" name="Bedlinen" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Towels?</td>
<td>
<input class="span4 input-big" id="dare_price4" name="Towels" value="" size="30" type="text" />
</td>
</tr>
</table>
<table style="width: 50%">
<tr>
<td style="width: 403px"></td>
<td></td>
</tr>
<tr>
<td style="width: 403px">Rentalprice</td>
<td>189.00</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px">Taxes</td>
<td style="width: 50px">
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="PricePersons" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Animals</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="PriceAnimals" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Bedlinen</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="PriceBedlinen" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Towels</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="PriceTowels" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px">Total</td>
<td> </td>
<td>Euro</td>
</tr>
</table>
最佳答案
这是您的更新fiddle .
我计算所有项目的总计。
这是片段。
$(document).ready(function() {
function updateArticle1() {
var Persons = parseFloat($("#dare_price1").val());
var total = (Persons) * 2.00;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$("#total_price_amount1").val(total);
}
function updateArticle2() {
var Animals = parseFloat($("#dare_price2").val());
var total = (Animals) * 3.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$("#total_price_amount2").val(total);
}
function updateArticle3() {
var Bedlinen = parseFloat($("#dare_price3").val());
var total = (Bedlinen) * 8.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$("#total_price_amount3").val(total);
}
function updateArticle4() {
var Towels = parseFloat($("#dare_price4").val());
var total = (Towels) * 7.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$("#total_price_amount4").val(total);
}
function updateTotal() {
var price1 = parseFloat($("#total_price_amount1").val());
var price2 = parseFloat($("#total_price_amount2").val());
var price3 = parseFloat($("#total_price_amount3").val());
var price4 = parseFloat($("#total_price_amount4").val());
var total = price1 + price2 + price3 + price4;
if (isNaN(total)) total = 0;
$("#totalSum").text(total);
}
$(document).on("change, keyup", "#dare_price1", updateArticle1);
$(document).on("change, keyup", "#dare_price2", updateArticle2);
$(document).on("change, keyup", "#dare_price3", updateArticle3);
$(document).on("change, keyup", "#dare_price4", updateArticle4);
$(document).on("click", "#getTotal", updateTotal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
<tr>
<td>Persons?</td>
<td>
<input class="span4 input-big" id="dare_price1" name="Persons" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Animals?</td>
<td>
<input class="span4 input-big" id="dare_price2" name="Animals" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Bedlinen?</td>
<td>
<input class="span4 input-big" id="dare_price3" name="Bedlinen" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Towels?</td>
<td>
<input class="span4 input-big" id="dare_price4" name="Towels" value="" size="30" type="text" />
</td>
</tr>
</table>
<table style="width: 50%">
<tr>
<td style="width: 403px"></td>
<td></td>
</tr>
<tr>
<td style="width: 403px">Rentalprice</td>
<td>189.00</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px">Taxes</td>
<td style="width: 50px">
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="PricePersons" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Animals</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="PriceAnimals" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Bedlinen</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="PriceBedlinen" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Towels</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="PriceTowels" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px">Total</td>
<td id="totalSum"> </td>
<td>Euro</td>
</tr>
</table>
<input id="getTotal" type="button" value="Get Total" />
可以通过替换 4 个函数 replaceArticle1()
、replaceArticle2()
、replaceArticle3()
、 进一步优化此代码仅使用单个函数
,并使用其 replaceArticle()
来替换Article4()id
更新相应的元素。
关于javascript - jquery函数的总表列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31231486/