我正在制作一个计算某些数据的动态表单,我被卡住了......
我有两个问题:
请帮忙解决
<table class="center font-1 top-3" width="100%">
<tr>
<td bgcolor="#808080" align="center"><font color="#FFFFFF">
<b>DEVICE</b></font></td>
<td bgcolor="#808080" align="center"><font color="#FFFFFF">
<b>SERVICE</b></font></td>
<td bgcolor="#808080" align="center">
<p align="center"><font color="#FFFFFF"><b>QUANTITY</b></font></p>
</td>
<td bgcolor="#808080" align="center"><font color="#FFFFFF">
<b>PRICE</b></font></td>
</tr>
<?php
for ($i = 1; $i < 21; $i++) {
$rowStyle ='';// = ($i == 1) ? "" : "style=\"display:none\"";
?>
<tr id="tableRow<?php echo $i; ?>" <?php echo $rowStyle; ?> >
<td align="center">
<select size="1" id="Devicerow<?php echo $i; ?>" onchange="JavaScript: calculateRow(<?php echo $i; ?>)">
<option selected>External</option>
<option>Internal</option>
<option>Personal</option>
</select> </td>
<td align="center">
<select size="1" id="Planrow<?php echo $i; ?>" onchange="JavaScript: calculateRow(<?php echo $i; ?>)">
<option selected>0 ($35.95)</option>
<option>1 ($29.95)</option>
<option>2 ($19.95)</option>
<option>3 ($17.95)</option>
<option>4 ($15.95)</option>
<option>5 ($12.95)</option>
<option>6 ($7.95)</option>
</select></td>
<td align="center">
<select size="1" id="Qtyrow<?php echo $i; ?>" onchange="JavaScript: calculateRow(<?php echo $i; ?>)">
<option selected>0</option>
<?php
for ($c = 1; $c < 20; $c++) {
echo '<option>' . $c . '</option>';
}
?>
</select></td>
<td align="center">
<div id="Totalrow<?php echo $i; ?>">
$0</div>
</td>
</tr>
<?php
}
?>
</table>
<table class="center font-1 top-3" width="100%">
<tr>
<td colspan="4">
<p align="right"><a onClick="JavaScript: addRow()"><img border="0" src="images/add_row_button.png"></a></p>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#F2F2F2"><b>One Time Devices Price</b></td>
<td align="center" bgcolor="#F2F2F2">
<div id="totalDevicePrice">
$0</div>
</td>
</tr>
<tr>
<td colspan="3"><b>Monthly Service Cost</b></td>
<td align="center">
<div id="totalServiceCost">
$0</div>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#F2F2F2"><b>Grad Total</b></td>
<td align="center" bgcolor="#F2F2F2">
<div id="grandTotal">
$0</div>
</td>
</tr>
</table>
<script>
var rows=2; //start with 2 since 1 is not hidden
function addRow(){
document.getElementById("tableRow"+rows).style.display="block";
rows=rows+1;
}
//price and service cost estimator
function getDataForDropdown(pref, num){
colName = (pref+''+num);
var columnName = document.getElementsByName(colName)[0].value;
if ( columnName == null || columnName == '' )
{
columnName = document.getElementById(colName).value;
}
if ( columnName == null || columnName == '' )
{
var select = document.getElementById(colName);
columnName= select.options[select.selectedIndex].value;
if ( columnName == null || columnName == '' )
{
columnName= select.options[select.selectedIndex].text;
}
}
return columnName;
}
var all_markers = {}; //hash map to hold markers
all_markers['External']=250;
all_markers['Internal']=295;
all_markers['Personal']=200;
var totalRows=20; //should be the same amount of rows as in the the php loop
function calculateRow(row){
var totalDevPrice=0;
var totalServicePrice=0;
for (i=1; i<totalRows;i++){
qty= getDataForDropdown('Qtyrow', i);
plan= getDataForDropdown('Planrow', i).split('$')[1].split(')')[0];
device = getDataForDropdown('Devicerow', i);
devprice = all_markers[device];
totalDevPrice+=(qty * devprice);
totalServicePrice+=(qty * plan);
document.getElementById("Totalrow"+i).innerHTML= '$'+((qty*plan)+(qty*devprice));
}
document.getElementById("totalDevicePrice").innerHTML= '$'+totalDevPrice;
document.getElementById("totalServiceCost").innerHTML= '$'+(totalServicePrice);
document.getElementById("grandTotal").innerHTML= '$'+(totalDevPrice+totalServicePrice);
}
</script>
答案 0 :(得分:0)
问题解决了。
某种程度上“阻止”没有做正确的工作。
在:
function addRow(){
document.getElementById("tableRow"+rows).style.display="block";
rows=rows+1;
}
工作:
function addRow(){
document.getElementById("tableRow"+rows).style.display='';
rows=rows+1;
}