Replacing Table Cell Content

Replacing Table Cell Content : Table : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Table »

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()
    } 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 = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
        placeHolder += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
        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>&nbsp;</P></SPAN>")
    }
    </SCRIPT>
    </TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>