Table Calculations
Add Style to table
Add a class for the table layout (tbl_1)
Add a class for the table Heading (td_h and td_0)
Add a class for the table alternating Rows (td_1 td_2)
Add a class for the bottom Row (td_3)
Add a class to tweek the totals (ttl , price_ttl_1, price_ttl_2)
<![CDATA[
<style type="text/css">
function tallyRow()
{
z=document.orderform.countTtl.value; //hidden value of db recordset count
//alert(z) //use for testing
x=0;y=0;Cost=0;Total=0;ttlQuant=0;
for (i=1;i<=z;i++)
{
x=eval("document.orderform.quantity_"+ i +".value");
y=eval("document.orderform.price_"+ i +".value");
Cost = (x*y); //nX = nX.toFixed(2)
document.getElementById("row_ttl_" + i ).value = Cost.toFixed(2);
Total=Total+Cost;
ttlQuant = ttlQuant + parseInt(x)
//document.orderform.QuantityX.value = ttlQuant; // show on table
document.orderform.Total.value = Total.toFixed(2); // show on table
//document.orderform.amount_1.value = Total.toFixed(2); // hidden for paypal
}
}
function popup1()
{
image = "../image_Main/PayPal.jpg";
window.showModalDialog(image,"","dialogWidth:1024px; dialogHeight:768px; resize:yes; status:yes; center:yes; dialogTop:222px; dialogLeft:222px; help:no; minimize:no; maximize:yes; border:thin; statusbar:yes;")
}
</script>
. . .
<style type="text/css">
body { /* Body Style */
background: #5A4836;
color: maroon;
margin: 0px;
background-color: #aabbcc;
font-size: 18px;
}
.tbl_1{
BACKGROUND-COLOR: #413427;
border:0px;
}
.td_h {
BACKGROUND-COLOR:#E8CEAD;
white-space: nowrap;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 14px;
color: #413427;
}
.td_0 {
BACKGROUND-COLOR: #413427;
white-space: nowrap;font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
color: #EDBB54;
border:1px;
}
.td_1 {
BACKGROUND-COLOR: #E8CEAD;
white-space: nowrap;font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
color: #000000;
border:1px;
}
.td_2 {
BACKGROUND-COLOR: #EDBB54;
white-space: nowrap;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
color: #413427;
border:1px;
}
.td_3 {
BACKGROUND-COLOR: #413427;
white-space: nowrap;font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
color: #EDBB54;
border:1px;
}
.price_ttl_1{
background-color: #E8CEAD;
width :50px;
font-size: 10px;
border:0px;
}
.price_ttl_2{
background-color: #EDBB54;
width :50px;
font-size: 10px;
border:0px;
}
.ttl{
background-color: #413427;
width :50px;
font-size: 10px;
color: #EDBB54;
border:0px;
}
</style>
. . .
<!-- ------------------------------------------------------------- -->
. . .
<form name="orderform" id="orderform" method="get">
<input type="hidden" id="countTtl" name="countTtl" value="6">
<table class="tbl_1" width=95%>
<tr>
<th colspan=5 class="td_h">
Originals and Lithographs
</th>
</tr>
<tr>
<td class="td_0" style="width:50px;">
Item #
</td>
<td class="td_0" style="width:250px;">
Description
</td>
<td class="td_0" style="width:50px;">
Price $
</td>
<td class="td_0" style="width:50px;">
Quantity
</td>
<td class="td_0" style="width:100px;">
Row Total $
</td>
</tr>
<tr>
<td class="td_1">
100001
</td>
<td class="td_1">
The Dragon
</td>
<td class="td_1">
<input type="text"
class="price_ttl_1"
name="price_1"
id="price_1"
value="500.00"
readonly="true" />
</td>
<td class="td_1">
<input type="text"
class=""
name="quantity_1"
id="quantity_1"
value=""
size="3"
onblur="tallyRow();" />
</td>
<td class="td_1">
<input type="text"
class="price_ttl_1"
name="row_ttl_1"
id="row_ttl_1"
value="0.00"
readonly="true" />
</td>
</tr>
<tr>
<td class="td_2">
100002
</td>
<td class="td_2">
Hush Little Ones
</td>
<td class="td_2">
<input type="text"
class="price_ttl_2"
name="price_2"
id="price_2"
value="600.00"
readonly="true" />
</td>
<td class="td_2">
<input type="text"
class=""
name="quantity_2"
id="quantity_2"
value=""
size="3"
onblur="tallyRow();" />
</td>
<td class="td_2">
<input type="text"
class="price_ttl_2"
name="row_ttl_2"
id="row_ttl_2"
value="0.00"
readonly="true" />
</td>
</tr>
<tr>
<td class="td_1">
100003
</td>
<td class="td_1">
A Monster, A Mouse, The Princess and Me
</td>
<td class="td_1">
<input type="text"
class="price_ttl_1"
name="price_3"
id="price_3"
value="450.00"
readonly="true" />
</td>
<td class="td_1">
<input type="text"
class=""
name="quantity_3"
id="quantity_3"
value=""
size="3"
onblur="tallyRow();" />
</td>
<td class="td_1">
<input type="text"
class="price_ttl_1"
name="row_ttl_3"
id="row_ttl_3"
value="0.00"
readonly="true" />
</td>
</tr>
<tr>
<td class="td_2">
100004
</td>
<td class="td_2">
Laura's Song
</td>
<td class="td_2">
<input type="text"
class="price_ttl_2"
name="price_4"
id="price_4"
value="300.00"
readonly="true" />
</td>
<td class="td_2">
<input type="text"
class=""
name="quantity_4"
id="quantity_4"
value=""
size="3"
onblur="tallyRow();" />
</td>
<td class="td_2">
<input type="text"
class="price_ttl_2"
name="row_ttl_4"
id="row_ttl_4"
value="0.00"
readonly="true" />
</td>
</tr>
<tr>
<td class="td_1">
100005
</td>
<td class="td_1">
The Christmas Bear of Baffin Bay
</td>
<td class="td_1">
<input type="text"
class="price_ttl_1"
name="price_5"
id="price_5"
value="650.00"
readonly="true" />
</td>
<td class="td_1">
<input type="text"
class=""
name="quantity_5"
id="quantity_5"
value=""
size="3"
onblur="tallyRow();" />
</td>
<td class="td_1">
<input type="text"
class="price_ttl_1"
name="row_ttl_5"
id="row_ttl_5"
value="0.00"
readonly="true" />
</td>
</tr>
<tr>
<td class="td_2">
100006
</td>
<td class="td_2">
Boxes and Bows
</td>
<td class="td_2">
<input type="text"
class="price_ttl_2"
name="price_6"
id="price_6"
value="700.00"
readonly="true" />
</td>
<td class="td_2">
<input type="text"
class=""
name="quantity_6"
id="quantity_6"
value=""
size="3"
onblur="tallyRow();" />
</td>
<td class="td_2">
<input type="text"
class="price_ttl_2"
name="row_ttl_6"
id="row_ttl_6"
value="0.00"
readonly="true" />
</td>
</tr>
<tr>
<td class="td_3" colspan="2" align="center">
<input type="button" value="Recalculate" onclick="tallyRow();">
<input type="button" value="Submit" onclick="popup1();">
<input type="reset" >
</td>
<td class="td_3" colspan=2 align=right>
Total
</td>
<td class="td_3">
<input type="text"
class="ttl"
name="Total"
id="Total"
value="0.00"
readonly="true" />
</td>
</tr>
</table>
</form>
]]>