|
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Modifying Table Cell Content</TITLE>
<STYLE TYPE="text/css">
.absoluteWrap {position:absolute}
.relativeWrap {position:relative}
.total {color:red}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var Ver4 = parseInt(navigator.appVersion) == 4
var Ver4Up = parseInt(navigator.appVersion) >= 4
var Nav4 = ((navigator.appName == "Netscape") && Ver4)
var modifiable
// calculate and display a row's total
function showTotal(qtyList) {
var qty = qtyList.options[qtyList.selectedIndex].value
var prodID = qtyList.name
var total = "US$" +
(qty * parseFloat(qtyList.form.elements[prodID + "Price"].value))
var newCellHTML = "<SPAN CLASS='total'>" + total + "</SPAN>"
if(Nav4) {
document.layers[prodID + "TotalWrapper"].document.layers[prodID +
"Total"].document.write(newCellHTML)
document.layers[prodID + "TotalWrapper"].document.layers[prodID +
"Total"].document.close()
} else if (modifiable) {
if (document.all) {
document.all(prodID + "Total").innerHTML = newCellHTML
} else {
document.getElementById(prodID + "Total").innerHTML = newCellHTML
}
}
}
// initialize global flag for browsers capable of modifiable content
function init() {
modifiable = (Ver4Up && document.body && document.body.innerHTML)
}
// display content for all products (e.g., in case of Back navigation)
function showAllTotals(form) {
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].type == "select-one") {
showTotal(form.elements[i])
}
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="init(); showAllTotals(document.orderForm)">
<H1>Modifying Table Cell Content</H1>
<HR>
<FORM NAME="orderForm">
<TABLE BORDER=1>
<COLGROUP WIDTH=150>
<COLGROUP WIDTH=100>
<COLGROUP WIDTH=50>
<COLGROUP WIDTH=100
<TR>
<TH>Product Description</TH>
<TH>Price Each</TH>
<TH>Quantity</TH>
<TH>Total</TH>
</TR>
<TR>
<TD>Wonder Widget 9000</TD>
<TD>US$125.00</TD>
<TD><SELECT NAME="ww9000" onChange="showTotal(this)">
<OPTION VALUE="0">0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
</SELECT>
<INPUT TYPE="hidden" NAME="ww9000Price" VALUE="125.00"></TD>
<TD>
<SCRIPT LANGUAGE="JavaScript">
if (Nav4) {
var placeHolder = " "
placeHolder += " "
document.write("<SPAN ID='ww9000TotalWrapper' CLASS='relativeWrap'>")
document.write("<SPAN ID='ww9000Total' CLASS='absoluteWrap'></SPAN>")
document.write("<SPAN>" + placeHolder + "</SPAN></SPAN>")
} else {
document.write("<SPAN ID='ww9000Total' CLASS='relativeWrap'>" +
"<P> </P></SPAN>")
}
</SCRIPT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
|