Replacing Table Cell Content
/* 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() } elseif (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> Related examples in the same category
