Modifying Table Columns

Modifying Table Columns : Table : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Table »

Modifying Table Columns



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/


<HTML>
<HEAD>
<TITLE>Modifying Table Columns</TITLE>
<STYLE TYPE="text/css">
THEAD {background-color:lightyellow; font-weight:bold}
.rankCells {background-color:lightgreen; font-weight:bold}
#myTABLE {background-color:bisque}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var theTable, theTableBody
function init() {
    theTable = (document.all) ? document.all.myTABLE : 
        document.getElementById("myTABLE")
    theTableBody = theTable.tBodies[0]
}
function insertColumn(form) {
    var oneRow, newCell, rank
    if (theTable.tHead) {
        oneRow = theTable.tHead.rows[0]
        newCell = oneRow.insertCell(0)
        newCell.innerHTML = "Ranking"
    }
    rank = 1
    for (var i = 0; i < theTableBody.rows.length; i++) {
        oneRow = theTableBody.rows[i]
        newCell = oneRow.insertCell(0)
        newCell.className = "rankCells"
        newCell.innerHTML = rank++
    }
    form.addColumn.disabled = true
    form.removeColumn.disabled = false
}
function deleteColumn(form) {
    var oneRow
    if (theTable.tHead) {
        oneRow = theTable.tHead.rows[0]
        oneRow.deleteCell(0)
    }
    for (var i = 0; i < theTableBody.rows.length; i++) {
        oneRow = theTableBody.rows[i]
        oneRow.deleteCell(0)
    }
    form.addColumn.disabled = false
    form.removeColumn.disabled = true
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Modifying Table Columns</H1>
<HR>
<FORM NAME="controls">
<FIELDSET>
<LEGEND>Add/Remove Left Column</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" NAME="addColumn" VALUE="Insert Left Column" 
    onClick="insertColumn(this.form)"></TD>
<TD><INPUT TYPE="button" NAME="removeColumn" VALUE="Remove Left Column" 
    DISABLED onClick="deleteColumn(this.form)"></TD>
</TR>
</TABLE>
</FIELDSET>
</TABLE>
</FIELDSET>
</FORM>
<HR>
<TABLE ID="myTABLE" CELLPADDING=5 BORDER=1>
<THEAD ID="myTHEAD">
<TR>
    <TD>River<TD>Outflow<TD>Miles<TD>Kilometers
</TR>
</THEAD>
<TBODY>
<TR>
    <TD>Nile<TD>Mediterranean<TD>4160<TD>6700
</TR>
<TR>
    <TD>Congo<TD>Atlantic Ocean<TD>2900<TD>4670
</TR>
<TR>

<TD>Niger<TD>Atlantic Ocean<TD>2600<TD>4180
</TR>
<TR>
    <TD>Zambezi<TD>Indian Ocean<TD>1700<TD>2740
</TR>
</TABLE>
</BODY>
</HTML>