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>