我有两张表，一张是类别，一张是产品。现在我想要电脑计算器。
我拥有基于数据库动态生成的所有字段。那么我该如何编写脚本来实现这样的效果。
<table ALIGN=CENTER WIDTH=100% BORDER=1 CELLSPACING=1 CELLPADDING=3>
<tr>
<th>Category Name</th>
<th>Product Name</th>
<th>Price</th>
</tr>
<tr class="odd">
<td>Speaker</td>
<td>
<select name="1" size="1" id="1">
<option value="1200.00">intex</option>
<option value="2100.00">creative</option>
<option value="1400.00">intex 2.1</option>
<option value="2000.00">intex 2.1 with woofer</option>
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>Laptop</td>
<td>
<select name="3" size="1" id="3">
<option value="31000.00">sony</option>
<option value="31500.00">hp</option>
<option value="31000.00">Acer</option>
<option value="36000.00">ibm</option>
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>Mouse</td>
<td>
<select name="4" size="1" id="4">
<option value="120.00"> teccom</option>
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>CPU</td>
<td>
<select name="6" size="1" id="6">
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>Projector</td>
<td>
<select name="7" size="1" id="7">
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>Anti Virus</td>
<td>
<select name="23" size="1" id="23">
<option value="450.00">McAfee</option>
<option value="1200.00">AVG</option>
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>Processor</td>
<td>
<select name="59" size="1" id="59">
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>testing</td>
<td>
<select name="60" size="1" id="60">
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>sadfasdfasdfadsfad</td>
<td>
<select name="61" size="1" id="61">
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>dfgd</td>
<td>
<select name="62" size="1" id="62">
</select>
</td>
<td><div id="t1" class="price">0</div></td>
</tr>
<tr>
<td></td>
<td>Total</td>
<td><div id="total"></div></td>
</tr>
</table>
这里是 jQuery
jQuery(document).ready(function() {
$("#sellp").change(function () {
var str = 0.00;
$("#sellp :selected").each(function () {
var test = $(this).val();
//alert(test);
var tr = parseInt(str) + parseInt(test);
//alert(tr);
$("#t1").text(test);
});
});
var sum = 0;
$("form :element").change(function() {
$('.price').each(function() {
sum += parseFloat($(this).text());
});
$('#total').html(sum) });
});
最佳答案
首先展示一些代码。
假设加载时所有项目都在页面中，您需要添加一些事件处理程序
这里是纯 JS - jQuery 可能更优雅。您可能需要从这里开始，然后添加验证。如果您以易于理解的方式命名字段，您的生活将会变得更加轻松
<html>
<head>
<script>
function calc(theForm) {
var total = 0;
for (var i=1;;i++) {
var item = theForm.elements["item_"+i];
if (item) {
var price = item.options[item.selectedIndex].value;
if (price && !isNaN(price)) {
price = parseFloat(price);
total+=price;
var priceId = item.id.replace('item','price');
document.getElementById(priceId).innerHTML=price.toFixed(2);
}
}
else break;
}
if (total) document.getElementById('total').innerHTML="$"+total.toFixed(2);
}
window.onload=function() {
var theForm = document.forms[0]; // first form on page
for (var i=0,n=theForm.elements.length;i<n;i++) {
if (theForm.elements[i].type.indexOf("select") !=-1) {
theForm.elements[i].onchange=function() { calc(this.form); }
}
}
theForm.onsubmit=function() { calc(this); return validate(this) }
calc(theForm)
}
</script>
</head>
<body>
<form>
<table ALIGN=CENTER WIDTH=100% BORDER=1 CELLSPACING=1 CELLPADDING=3 >
<tr>
<th>Category Name</th>
<th>Product Name</th>
<th>Price</th>
</tr>
<tr class="odd">
<td>Speaker </td>
<td><select name="item_1" size="1" id="item_1">
<option value="1200.00"> intex</option>
<option value="2100.00"> creative</option>
<option value="1400.00"> intex 2.1</option>
<option value="2000.00"> intex 2.1 with woofer</option>
</select>
</td>
<td><div id="price_1" class="price">0</div></td>
</tr>
<tr class="odd">
<td>Laptop </td>
<td><select name="item_2" size="1" id="item_2">
<option value="31000.00"> sony</option>
<option value="31500.00"> hp</option>
<option value="31000.00"> Acer</option>
<option value="36000.00"> ibm</option>
</select>
</td>
<td><div id="price_2" class="price">0</div></td>
</tr>
<tr class="odd">
<td>Mouse </td>
<td><select name="item_3" size="1" id="item_3">
<option value="120.00"> teccom</option>
</select>
</td>
<td><div id="price_3" class="price">0</div></td>
</tr>
</table>
</form>
Total: <span id="total"></span>
关于php - 如何在 php 中创建电脑计算器脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5622474/