JavaScript DHTML/HTML/Table

Материал из Web эксперт
Версия от 07:23, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Accessing userProfile Data

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>userProfile Object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var attrs = ["Business.City","Business.Country","Business.Fax",
             "Business.Phone","Business.State","Business.StreetAddress",
             "Business.URL","Business.Zipcode","Cellular","Company",
             "Department","DisplayName","Email","FirstName",
             "Gender","Home.City","Home.Country","Home.Fax",
             "Home.Phone","Home.State","Home.StreetAddress",
             "Home.Zipcode","Homepage","JobTitle","LastName",
             "MiddleName","Notes","Office","Pager"]
function loadTable() {
    // make sure this executes only in IE4+ for Windows
    if ((navigator.userAgent.indexOf("Win") != -1) && navigator.userProfile) {
        var newRow, newCell, attrValue
        // queue up requests for every vCard attribute
        for (var i = 0; i < attrs.length; i++) {
            navigator.userProfile.addReadRequest("vCard." + attrs[i])
        }
        // dispatch the request to let user accept or deny access
navigator.userProfile.doReadRequest(1, "JavaScript Bible")
        // append rows to the table with attribute/value pairs
        for (var j = 0; j < attrs.length; j++) {
            newRow = document.all.attrTable.insertRow(-1)
            newRow.bgColor = "#FFFF99"
            newCell = newRow.insertCell(0)
            newCell.innerText = "vCard." + attrs[j]
            newCell = newRow.insertCell(1)
            // get the actual value
            attrValue = navigator.userProfile.getAttribute("vCard." + attrs[j])
            newCell.innerHTML = (attrValue) ? attrValue : "&nbsp;"
        }
        // clean up after ourselves
        navigator.userProfile.clearRequest()
    } else {
        alert("This example requires IE4+ for Windows.")
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="loadTable()">
<H1>userProfile Object</H1>
<HR>
<TABLE ID="attrTable" BORDER=1 CELLPADDING=5>
<TR BGCOLOR="#CCFFFF">
    <TH>vCard Property<TH>Value
</TR>
</TABLE>
</BODY>
</HTML>



Adding cells to a table row

 
<html>
<head>
<script type="text/javascript">
function addCell(){
    var x=document.getElementById("myTable").rows[0]
    var y=x.insertCell(2)
    y.innerHTML="NEW CELL"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>d</td>
<td>d</td>
</tr>
<tr>
<td>d</td>
<td>d</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<form>
<input type="button" onclick="addCell()" value="Add cell">
</form>
</body>
</html>



Adding table rows

 
<html>
<head>
<script type="text/javascript">
function insRow(){
    var x=document.getElementById("myTable").insertRow(2)
    var y=x.insertCell(0)
    var z=x.insertCell(1)
    y.innerHTML="NEW CELL1"
    z.innerHTML="NEW CELL2"
}
</script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
    </tr>
    <tr>
        <td>Row4 cell1</td>
        <td>Row4 cell2</td>
    </tr>
    <tr>
        <td>Row5 cell1</td>
        <td>Row5 cell2</td>
    </tr>
</table>
<form>
<input type="button" onclick="insRow()" value="Insert row">
</form>
</body>
</html>



Align the cell content in a single cell

 
<html>
<head>
<script type="text/javascript">
function alignCell(){
    var x=document.getElementById("myTable").rows[0].cells
    x[0].align="center"
}
</script>
</head>
<body>
<table id="myTable" border="1" width="100%">
<tr>
<td>First cell</td>
<td>Second cell</td>
</tr>
<tr>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
</table>
<form>
<input type="button" onclick="alignCell()" value="Align cell content">
</form>
</body>
</html>



Align the cell content in a table row

 
<html>
<head>
<script type="text/javascript">
function alignRow(){
    var x=document.getElementById("myTable").rows
    x[0].align="right"
}
</script>
</head>
<body>
<table width="60%" id="myTable" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<form>
<input type="button" onclick="alignRow()" value="Align first row">
</form>
</body>
</html>



Change table border width and cell padding

  
<html>
<head>
<title>Build-o-Table</title>
<script type="text/javascript">
function procImage() {
   var tbl = document.getElementById("table1");
   tbl.border="5px";
   tbl.cellPadding="5px";

} 
</script>
<body onload="procImage();">
<table id="table1">
<tr><td>adsf</td></tr>
</table>
</body>
</html>



Change table row height

 
<html>
<head>
<script type="text/javascript">
    function specifyRow(){
        var x=document.getElementById("myTable").rows
        x[1].height="100"
    }
</script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
    </tr>
    <tr>
        <td>Row4 cell1</td>
        <td>Row4 cell2</td>
    </tr>
    <tr>
        <td>Row5 cell1</td>
        <td>Row5 cell2</td>
    </tr>
</table>
<form>
    <input type="button" onclick="specifyRow()" value="Change height of third row">
</form>
</body>
</html>



Change the cell content in a table row

 
<html>
<head>
<script type="text/javascript">
function changeContent(){
    var x=document.getElementById("myTable").rows
    var y=x[0].cells
    y[0].innerHTML="NEW CONTENT"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>d</td>
<td>d</td>
</tr>
<tr>
<td>d</td>
<td>d</td>
</tr>
</table>
<form>
<input type="button" onclick="changeContent()" value="Change content">
</form>
</body>
</html>



Change the cellPadding and cellSpacing of a table

 
<html>
<head>
<script type="text/javascript">
function padding(){
    document.getElementById("myTable").cellPadding="25"
}
function spacing(){
    document.getElementById("myTable").cellSpacing="25"
}
</script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>
<form>
    <input type="button" onclick="padding()" value="Change Cellpadding">
    <input type="button" onclick="spacing()" value="Change Cellspacing">
</form>
</body>
</html>



Change the colspan of a table row

 
<html>
<head>
<script type="text/javascript">
function setColSpan(){
    var x=document.getElementById("myTable").rows[0].cells
    x[0].colSpan="2"
    x[1].colSpan="6"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td colspan="4">cell 1</td>
<td colspan="4">cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
<td>cell 10</td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan()" value="Change colspan">
</form>
</body>
</html>



Change the width of a table border

 
<html>
<head>
<script type="text/javascript">
function changeBorder(){
    document.getElementById("myTable").border="20"
}
</script>
</head>
<body>
<table border="1" id="myTable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>
<form>
    <input type="button" onclick="changeBorder()" value="Change Border">
</form>
</body>
</html>



Create a table

 
<head>
<title></title>
</script>
</head>
<body>
<div id="thetable"></div>
<script type = "text/javascript" >
var table = document.createElement("table");
table.border = "1";
var tbody = document.createElement("tbody");
table.appendChild(tbody);
var row = document.createElement("tr");
for (i = 1; i < 3; i++) {
    var row = document.createElement("tr");
    for (j = 1; j < 3; j++) {
        var td = document.createElement("td");
        var data = document.createTextNode("Row " + i + ", Column " + j);
        td.appendChild(data);
        row.appendChild(td);
    }
    tbody.appendChild(row);
}
document.getElementById("thetable").appendChild(table); 
</script>
</body>



Create table caption

 
<html>
<head>
<script type="text/javascript">
function caption(){
    var x=document.getElementById("myTable").createCaption()
    x.innerHTML="<b>My table caption</b>"
}
</script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
    </tr>
</table>
<form>
<input type="button" onclick="caption()" value="Create caption">
</form>
</body>
</html>



Cycling Through Table frame Property Values

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/

<HTML>
<HEAD>
<TITLE>TABLE.frame Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var timeoutID
var frameValues = ["box", "above", "rhs", "below", "lhs", "hsides", "vsides", 
                   "border", "void"]
function rotateBorder(i) {
    document.getElementById("myTABLE").frame = frameValues[i]
    document.getElementById("myCAPTION").innerHTML = frameValues[i]
    i = (++i == frameValues.length) ? 0 : i
    timeoutID = setTimeout("rotateBorder(" + i + ")", 2000)
}
function stopRotate() {
    clearTimeout(timeoutID)
    document.getElementById("myTABLE").frame = "box"
    document.getElementById("myCAPTION").innerHTML = "box"
}
</SCRIPT>
</HEAD>
<BODY>
<H1>TABLE.frame Property</H1>
<HR>
<FORM NAME="controls">
<FIELDSET>
<LEGEND>Cycle Table Edge Visibility</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" VALUE="Cycle" onClick="rotateBorder(0)"></TD>
<TD><INPUT TYPE="button" VALUE="Stop" onClick="stopRotate()"></TD>
</TR>
</TABLE>
</FIELDSET>
</TABLE>
</FIELDSET>
</FORM>
<HR>
<TABLE ID="myTABLE" CELLPADDING=5 BORDER=3 ALIGN="center">
<CAPTION ID="myCAPTION">Default</CAPTION>
<THEAD ID="myTHEAD">
<TR>
    <TH>River<TH>Outflow<TH>Miles<TH>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>



Cycling Through Table rows Property Values

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/

<HTML>
<HEAD>
<TITLE>TABLE.rules Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var timeoutID
var rulesValues = ["all", "cols", "groups", "none", "rows"]
function rotateBorder(i) {
    document.getElementById("myTABLE").rules = rulesValues[i]
    document.getElementById("myCAPTION").innerHTML = rulesValues[i]
    i = (++i == rulesValues.length) ? 0 : i
    timeoutID = setTimeout("rotateBorder(" + i + ")", 2000)
}
function stopRotate() {
    clearTimeout(timeoutID)
    document.getElementById("myTABLE").rules = "all"
    document.getElementById("myCAPTION").innerHTML = "all"
}
</SCRIPT>
</HEAD>
<BODY>
<H1>TABLE.rules Property</H1>
<HR>
<FORM NAME="controls">
<FIELDSET>
<LEGEND>Cycle Table Rule Visibility</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" VALUE="Cycle" onClick="rotateBorder(0)"></TD>
<TD><INPUT TYPE="button" VALUE="Stop" onClick="stopRotate()"></TD>
</TR>
</TABLE>
</FIELDSET>
</TABLE>
</FIELDSET>
</FORM>
<HR>
<TABLE ID="myTABLE" CELLPADDING=5 BORDER=3 ALIGN="center">
<CAPTION ID="myCAPTION">Default</CAPTION>
<COLGROUP SPAN=1>
<COLGROUP SPAN=3>
<THEAD ID="myTHEAD">
<TR>
    <TH>River<TH>Outflow<TH>Miles<TH>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>



Deleting table rows

 
<html>
<head>
<script type="text/javascript">
function deleteRow(i){
    document.getElementById("myTable").deleteRow(i)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
</table>
</body>
</html>



Inserting/Removing Row Elements

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Modifying Table Cell Content</TITLE>
<STYLE TYPE="text/css">
THEAD {background-color:lightyellow; font-weight:bold}
TFOOT {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 appendRow(form) {
    insertTableRow(form, -1)
}
function addRow(form) {
    insertTableRow(form, form.insertIndex.value)
}
function insertTableRow(form, where) {
    var now = new Date()
    var nowData = [now.getHours(), now.getMinutes(), now.getSeconds(), 
        now.getMilliseconds()]
    clearBGColors()
    var newCell
    var newRow = theTableBody.insertRow(where)
    for (var i = 0; i < nowData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = nowData[i]
        newCell.style.backgroundColor = "salmon"
    }
    updateRowCounters(form)
}
function removeRow(form) {
    theTableBody.deleteRow(form.deleteIndex.value)
    updateRowCounters(form)
}
function insertTHEAD(form) {
    var THEADData = ["Hours","Minutes","Seconds","Milliseconds"]
    var newCell
    var newTHEAD = theTable.createTHead()
    newTHEAD.id = "myTHEAD"
    var newRow = newTHEAD.insertRow(-1)
    for (var i = 0; i < THEADData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = THEADData[i]
    }
    updateRowCounters(form)
    form.addTHEAD.disabled = true
    form.deleteTHEAD.disabled = false
}
function removeTHEAD(form) {
    theTable.deleteTHead()    
    updateRowCounters(form)
    form.addTHEAD.disabled = false
    form.deleteTHEAD.disabled = true
}
function insertTFOOT(form) {
    var TFOOTData = ["Hours","Minutes","Seconds","Milliseconds"]
    var newCell
    var newTFOOT = theTable.createTFoot()
    newTFOOT.id = "myTFOOT"
    var newRow = newTFOOT.insertRow(-1)
    for (var i = 0; i < TFOOTData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = TFOOTData[i]
    }
    updateRowCounters(form)
    form.addTFOOT.disabled = true
    form.deleteTFOOT.disabled = false
}
function removeTFOOT(form) {
    theTable.deleteTFoot()    
    updateRowCounters(form)
    form.addTFOOT.disabled = false
    form.deleteTFOOT.disabled = true
}
function insertCaption(form) {
    var captionData = form.captionText.value
    var newCaption = theTable.createCaption()
    newCaption.innerHTML = captionData
    form.addCaption.disabled = true
    form.deleteCaption.disabled = false
}
function removeCaption(form) {
    theTable.deleteCaption()    
    form.addCaption.disabled = false
    form.deleteCaption.disabled = true
}
// housekeeping functions
function updateRowCounters(form) {
    var sel1 = form.insertIndex
    var sel2 = form.deleteIndex
    sel1.options.length = 0
    sel2.options.length = 0
    for (var i = 0; i < theTableBody.rows.length; i++) {
        sel1.options[i] = new Option(i, i)
        sel2.options[i] = new Option(i, i)
    }
    form.removeRowBtn.disabled = (i==0)
}
function clearBGColors() {
    for (var i = 0; i < theTableBody.rows.length; i++) {
        for (var j = 0; j < theTableBody.rows[i].cells.length; j++) {
            theTableBody.rows[i].cells[j].style.backgroundColor = ""        
        }
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Modifying Tables</H1>
<HR>
<FORM NAME="controls">
<FIELDSET>
<LEGEND>Add/Remove Rows</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" VALUE="Append 1 Row" 
    onClick="appendRow(this.form)"></TD>
<TD><INPUT TYPE="button" VALUE="Insert 1 Row" onClick="addRow(this.form)"> at index: 
    <SELECT NAME="insertIndex">
        <OPTION VALUE="0">0
    </SELECT></TD>
<TD><INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row" DISABLED 
    onClick="removeRow(this.form)"> at index: 
    <SELECT NAME="deleteIndex">
        <OPTION VALUE="0">0
    </SELECT></TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND>Add/Remove THEAD and TFOOT</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD" 
    onClick="insertTHEAD(this.form)"><BR>
    <INPUT TYPE="button" NAME="deleteTHEAD" VALUE="Remove THEAD" DISABLED 
        onClick="removeTHEAD(this.form)">
</TD>
<TD><INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT" 
    onClick="insertTFOOT(this.form)"><BR>
    <INPUT TYPE="button" NAME="deleteTFOOT" VALUE="Remove TFOOT" DISABLED 
        onClick="removeTFOOT(this.form)">
</TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND>Add/Remove Caption</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption" 
    onClick="insertCaption(this.form)"></TD>
<TD>Text: <INPUT TYPE="text" NAME="captionText" SIZE=40 VALUE="Sample Caption">
<TD><INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption" DISABLED 
    onClick="removeCaption(this.form)"></TD>
</TR>
</TABLE>
</FIELDSET>
</FORM>
<HR>
<TABLE ID="myTABLE" CELLPADDING=10 BORDER=1>
<TBODY>
</TABLE>
</BODY>
</HTML>



Insert table row: the uniqueID Property

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Inserting an IE5+/Windows Table Row</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function addRow(item1) {
    if (item1) {
        // assign long reference to shorter var name
        var theTable = document.all.myTable
        // append new row to the end of the table
        var newRow = theTable.insertRow(theTable.rows.length)
        // give the row its own ID
        newRow.id = newRow.uniqueID
        
        // declare cell variable
        var newCell
        
        // an inserted row has no cells, so insert the cells
        newCell = newRow.insertCell(0)
        // give this cell its own id
        newCell.id = newCell.uniqueID
        // display the row"s id as the cell text
        newCell.innerText = newRow.id
        newCell.bgColor = "yellow"
        // reuse cell var for second cell insertion
        newCell = newRow.insertCell(1)
        newCell.id = newCell.uniqueID
        newCell.innerText = item1
    }
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE ID="myTable" BORDER=1>
<TR>
<TH>Row ID</TH>
<TH>Data</TH>
</TR>
<TR ID="firstDataRow">
<TD>firstDataRow
<TD>Fred
</TR>
<TR ID="secondDataRow">
<TD>secondDataRow
<TD>Jane
</TR>
</TABLE>
<HR>
<FORM>
Enter text to be added to the table:<BR>
<INPUT TYPE="text" NAME="input" SIZE=25><BR>
<INPUT TYPE="button" VALUE="Insert Row" onClick="addRow(this.form.input.value)">
</FORM>
</BODY>
</HTML>



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>



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>



Specify frames of a table

 
<html>
<head>
<script type="text/javascript">
function aboveFrames(){
    document.getElementById("myTable").frame="above"
}
function belowFrames(){
    document.getElementById("myTable").frame="below"
}
</script>
</head>
<body>
<table id="myTable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>
<form>
    <input type="button" onclick="aboveFrames()" value="Show above frames">
    <input type="button" onclick="belowFrames()" value="Show below frames">
</form>
</body>
</html>



Specify rules for a table

 
<html>
<head>
<script type="text/javascript">
function rowRules(){
    document.getElementById("myTable").rules="rows"
}
function colRules(){
    document.getElementById("myTable").rules="cols"
}
</script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
    </tr>
    <tr>
        <td>Row4 cell1</td>
        <td>Row4 cell2</td>
    </tr>
    <tr>
        <td>Row5 cell1</td>
        <td>Row5 cell2</td>
    </tr>
</table>
<form>
<input type="button" onclick="rowRules()" value="Show row borders">
<input type="button" onclick="colRules()" value="Show col borders">
</form>
</body>
</html>



Tabular data in Javascript with hyper link

 
 <!-- ***********************************************************
Example 5-11
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates  ISBN 0-596-00316-1
http://www.oreilly.ru
Copyright 2002 Danny Goodman.  All Rights Reserved.
************************************************************ -->
<html>
<head>
<title>Dynamic Table</title>
<style type="text/css">
body {background-color:#ffffff}
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px}
th {border:2px groove black; padding:7px}
.ctr {text-align:center}
</style>
<script language="JavaScript" type="text/javascript">
// Table data -- an array of objects
var jsData = new Array();
jsData[0] = {bowl:"I", year:1967, winner:"Packers", winScore:35, loser:"Chiefs", losScore:10};
jsData[1] = {bowl:"II", year:1968, winner:"Packers", winScore:33, loser:"Raiders (Oakland)", losScore:14};
jsData[2] = {bowl:"III", year:1969, winner:"Jets", winScore:16, loser:"Colts (Balto)", losScore:7};
jsData[3] = {bowl:"IV", year:1970, winner:"Chiefs", winScore:23, loser:"Vikings", losScore:7};
jsData[4] = {bowl:"V", year:1971, winner:"Colts (Balto)", winScore:16, loser:"Cowboys", losScore:13};
// Sorting functions (invoked by sortTable())
function sortByYear(a, b) {
    return a.year - b.year;
}
function sortByWinScore(a, b) {
    return b.winScore - a.winScore;
}
function sortByLosScore(a, b) {
    return b.losScore - a.losScore;
}
function sortByWinner(a, b) {
    a = a.winner.toLowerCase();
    b = b.winner.toLowerCase();
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLoser(a, b) {
    a = a.loser.toLowerCase();
    b = b.loser.toLowerCase();
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
// Sorting function dispatcher (invoked by table column links)
function sortTable(link) {
    switch (link.firstChild.nodeValue) {
        case "Year" :
            jsData.sort(sortByYear);
            break;
        case "Winner" :
            jsData.sort(sortByWinner);
            break;
        case "Loser" :
            jsData.sort(sortByLoser);
            break;
        case "Win" :
            jsData.sort(sortByWinScore);
            break;
        case "Lose" :
            jsData.sort(sortByLosScore);
            break;
    }
    drawTable("bowlData")
}
// Remove existing table rows
function clearTable(tbody) {
    while (tbody.rows.length > 0) {
        tbody.deleteRow(0);
    }
}
// Draw table from "jsData" array of objects
function drawTable(tbody) {
    var tr, td;
    tbody = document.getElementById(tbody);
    // remove existing rows, if any
    clearTable(tbody);
    // loop through data source
    for (var i = 0; i < jsData.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("class", "ctr");
        td.innerHTML = jsData[i].bowl;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].year;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].winner;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].loser;
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("class", "ctr");
        td.innerHTML = jsData[i].winScore + " - " + jsData[i].losScore;
    }
}
</script>
</head>
<body onload="drawTable("bowlData")">
<h1>Super Bowl Games</h1>
<hr>
<table id="bowlGames">
<thead>
<tr><th>Bowl</th>
    <th><a href="#" title="Sort by Year" onclick="sortTable(this)">Year</a></th>
    <th><a href="#" title="Sort by Winning Team" onclick="sortTable(this)">Winner</a></th>
    <th><a href="#" title="Sort by Losing Team" onclick="sortTable(this)">Loser</a></th>
    <th>Score <a href="#" title="Sort by Winning Score" 
    onclick="sortTable(this)">Win</a> - <a href="#" 
    title="Sort by Losing Score" onclick="sortTable(this)">Lose</a></th>
</tr>
</thead>
<tbody id="bowlData"></tbody>
</table>
</body>
</html>



Transforming JavaScript Data into HTML Tables

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 14.7</title>
<link rel="stylesheet" id="mainStyle" href="../css/cookbook.css" type="text/css" />
<style type="text/css">
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px; background-color:#ccffcc}
th {border:2px groove black; padding:7px; background-color:#ffffcc}
.ctr {text-align:center}
</style>
<script type="text/javascript">
// Table data -- an array of objects
var jsData = new Array();
jsData[0] = {location:"Uruguay", year:1930, winner:"Uruguay", winScore:4, 
             loser:"Argentina", losScore:2};
jsData[1] = {location:"Italy", year:1934, winner:"Italy", winScore:2, 
             loser:"Czechoslovakia", losScore:1};
jsData[2] = {location:"France", year:1938, winner:"Italy", winScore:4, 
             loser:"Hungary", losScore:2};
jsData[3] = {location:"Brazil", year:1950, winner:"Uruguay", winScore:2, 
             loser:"Brazil", losScore:1};
jsData[4] = {location:"Switzerland", year:1954, winner:"West Germany", winScore:3, 
             loser:"Hungary", losScore:2};
// Draw table from "jsData" array of objects
function drawTable(tbody) {
    var tr, td;
    tbody = document.getElementById(tbody);
    // loop through data source
    for (var i = 0; i < jsData.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = jsData[i].year;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].location;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].winner;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].loser;
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = jsData[i].winScore + " - " + jsData[i].losScore;
    }
}
</script>
</head>
<body onload="drawTable("matchData")">
<h1>Transforming JavaScript Data into HTML Tables</h1>
<hr /> 
<table id="cupFinals">
<thead>
<tr><th>Year</th>
    <th>Host Country</th>
    <th>Winner</th>
    <th>Loser</th>
    <th>Score (Win - Lose)</th>
</tr>
</thead>
<tbody id="matchData"></tbody>
</table>
</body>
</html>



Transforming JavaScript Data into HTML Tables with HyperLink

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 14.16</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
    margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}

</style>
<style type="text/css">
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px; background-color:#ccffcc}
th {border:2px groove black; padding:7px; background-color:#ffffcc}
.ctr {text-align:center}
</style>
<script type="text/javascript">
// Table data -- an array of objects
var jsData = new Array();
jsData[0] = {location:"Uruguay", year:1930, winner:"Uruguay", winScore:4, 
             loser:"Argentina", losScore:2};
jsData[1] = {location:"Italy", year:1934, winner:"Italy", winScore:2, 
             loser:"Czechoslovakia", losScore:1};
jsData[2] = {location:"France", year:1938, winner:"Italy", winScore:4, 
             loser:"Hungary", losScore:2};
jsData[3] = {location:"Brazil", year:1950, winner:"Uruguay", winScore:2, 
             loser:"Brazil", losScore:1};
jsData[4] = {location:"Switzerland", year:1954, winner:"West Germany", winScore:3, 
             loser:"Hungary", losScore:2};
// Draw table from "jsData" array of objects
function drawTable(tbody) {
    var tr, td;
    tbody = document.getElementById(tbody);
    // remove existing rows, if any
    clearTable(tbody);
    // loop through data source
    for (var i = 0; i < jsData.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = jsData[i].year;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].location;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].winner;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].loser;
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = jsData[i].winScore + " - " + jsData[i].losScore;
    }
}
// Remove existing table rows
function clearTable(tbody) {
    while (tbody.rows.length > 0) {
        tbody.deleteRow(0);
    }
}
// Sorting function dispatcher (invoked by table column links)
function sortTable(link) {
    switch (link.firstChild.nodeValue) {
        case "Year" :
            jsData.sort(sortByYear);
            break;
        case "Host Country" :
            jsData.sort(sortByHost);
            break;
        case "Winner" :
            jsData.sort(sortByWinner);
            break;
        case "Loser" :
            jsData.sort(sortByLoser);
            break;
        case "Win" :
            jsData.sort(sortByWinScore);
            break;
        case "Lose" :
            jsData.sort(sortByLosScore);
            break;
    }
    drawTable("matchData")
    return false
}
// Sorting functions (invoked by sortTable())
function sortByYear(a, b) {
    return a.year - b.year;
}
function sortByHost(a, b) {
    a = a.location.toLowerCase();
    b = b.location.toLowerCase();
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByWinScore(a, b) {
    return b.winScore - a.winScore;
}
function sortByLosScore(a, b) {
    return b.losScore - a.losScore;
}
function sortByWinner(a, b) {
    a = a.winner.toLowerCase();
    b = b.winner.toLowerCase();
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLoser(a, b) {
    a = a.loser.toLowerCase();
    b = b.loser.toLowerCase();
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
</script>
</head>
<body onload="drawTable("matchData")">
<h1>Transforming JavaScript Data into HTML Tables</h1>
<hr /> 
<table id="cupFinals">
<thead>
<tr>
    <th><a href="#" title="Sort by Year" 
           onclick="return sortTable(this)">Year</a></th>
    <th><a href="#" title="Sort by Country" 
           onclick="return sortTable(this)">Host Country</a></th>
    <th><a href="#" title="Sort by Winning Team" 
           onclick="return sortTable(this)">Winner</a></th>
    <th><a href="#" title="Sort by Losing Team" 
           onclick="return sortTable(this)">Loser</a></th>
    <th>Score <a href="#" title="Sort by Winning Score" 
                 onclick="return sortTable(this)">Win</a> - <a href="#" 
                 title="Sort by Losing Score" 
                 onclick="return sortTable(this)">Lose</a></th>
</tr>
</thead>
<tbody id="matchData"></tbody>
</table>
</body>
</html>



Using the cloneNode Method

 
/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 
ISBN: 067231763X
Publisher Sams CopyRight 2000
*/
<HTML>
<HEAD>
<TITLE> DOM cloneNode example </TITLE>
</HEAD>
<BODY ID="bodyNode">
     <TABLE ID="tableNode">
       <TBODY>
         <TR ID="tr1Node">
             <TD BGCOLOR="yellow">Row 1, Cell 1</TD>
             <TD BGCOLOR="orange">Row 1, Cell 2</TD>
         </tr>
         <TR ID="tr2Node">
             <TD BGCOLOR="red">Row 2, Cell 1</TD>
             <TD BGCOLOR="magenta">Row 2, Cell 2</TD>
          </tr>
         <TR ID="tr3Node">
              <TD BGCOLOR="lightgreen">Row 3, Cell 1</TD>
              <td BGCOLOR="beige">Row 3, Cell 2</TD></TR>
         <TR ID="tr4Node">
             <TD BGCOLOR="blue">Row 4, Cell 1</TD>
             <TD BGCOLOR="lightblue">Row 4, Cell 2</TD>
         </tr>
         <TR ID="tr5Node">
             <TD BGCOLOR="orange">Row 5, Cell 1</TD>
             <TD BGCOLOR="purple">Row 5, Cell 2</TD>
         </tr>
       </TBODY>
     </TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
tr3Obj = tr1Node.cloneNode(false);
alert(
       "tr3Obj.firstChild = " + tr3Obj.firstChild + "\n" +
       "tr3Obj.nodeName = " + tr3Obj.nodeName
      );
 // -->
</SCRIPT>
</BODY>
</HTML>



Using the Data Binding record Number Property

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Data Binding (recordNumber)</TITLE>
<STYLE TYPE="text/css">
.filmTitle {font-style:italic}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// set recordset pointer to the record clicked on in the table.
function setRecNum(row) {
    document.oscars.recordset.AbsolutePosition = row.recordNumber
}
</SCRIPT>
</HEAD>
<BODY>
<P><B>Academy Awards 1978-1997</B> 
(Click on a table row to extract data from one record.)</P>
<P>The award for Best Actor of <SPAN DATASRC="#oscars" DATAFLD="Year"></SPAN>
&nbsp;went to <SPAN DATASRC="#oscars" DATAFLD="Best Actor"></SPAN>
&nbsp;for his outstanding achievement in the film 
<SPAN CLASS="filmTitle" DATASRC="#oscars" DATAFLD="Best Actor Film"></SPAN>.</P>
<TABLE BORDER=1 DATASRC="#oscars" ALIGN="center">
<THEAD STYLE="background-color:yellow; text-align:center">
<TR><TD>Year</TD>
    <TD>Film</TD>
    <TD>Director</TD>
    <TD>Actress</TD>
    <TD>Actor</TD>
</TR>
</THEAD>
<TR ID=repeatableRow onClick="setRecNum(this)">
    <TD><DIV ID="col1" DATAFLD="Year"></DIV></TD>
    <TD><DIV CLASS="filmTitle" ID="col2" DATAFLD="Best Picture"></DIV></TD>
    <TD><DIV ID="col3" DATAFLD="Best Director"></DIV></TD>
    <TD><DIV ID="col4" DATAFLD="Best Actress"></DIV></TD>
    <TD><DIV ID="col5" DATAFLD="Best Actor"></DIV></TD>
</TR>
</TABLE>
<OBJECT ID="oscars" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <PARAM NAME="DataURL" VALUE="Academy Awards.txt">
    <PARAM NAME="UseHeader" VALUE="True">
    <PARAM NAME="FieldDelim" VALUE="&#09;">
</OBJECT>
</BODY>
</HTML>



Using the offsetParent Property

 

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>offsetParent Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setImagePosition(){
    var cElement = document.all.myCell
    // Set flag for whether calculations should use
    // client- or offset- property measures. Use
    // client- for IE5/Mac and IE4/Windows; otherwise
    // use offset- properties. An ugly, but necessary
    // workaround.
    var useClient = (cElement.offsetTop == 0) ? 
        ((cElement.offsetParent.tagName == "TR") ? false : true) : false
    if (useClient) {
        var x = cElement.clientLeft
        var y = cElement.clientTop
    } else {
        var x = cElement.offsetLeft
        var y = cElement.offsetTop
    }
    var pElement = document.all.myCell.offsetParent
    while (pElement != document.body) {
        if (useClient) {
            x += pElement.clientLeft
            y += pElement.clientTop
        } else {
            x += pElement.offsetLeft
            y += pElement.offsetTop
        }
        pElement = pElement.offsetParent
    }
    document.all.myDIV.style.pixelLeft = x
    document.all.myDIV.style.pixelTop = y
    document.all.myDIV.style.visibility = "visible"
}
</SCRIPT>
</HEAD>
<BODY onload="setImagePosition()">
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<H1>The offsetParent Property</H1>
<HR>
<P>After the document loads, the script positions a small image in the upper
 left corner of the second table cell.</P>
<TABLE BORDER=1 ALIGN="center">
<TR>
    <TD>This is the first cell</TD>
    <TD ID="myCell">This is the second cell.</TD>
</TR>
</TABLE>
<DIV ID="myDIV" STYLE="position:absolute; visibility:hidden; height:12; width:12">
<IMG SRC="http://www.wbex.ru/style/logo.png" HEIGHT=12 WIDTH=12></DIV>
</BODY>
</HTML>



Vertical align the cell content in a single cell

 
<html>
<head>
<script type="text/javascript">
function valignCell(){
    var x=document.getElementById("myTable").rows[0].cells
    x[0].vAlign="bottom"
}
</script>
</head>
<body>
<table id="myTable" border="1" height="70%">
<tr>
<td>l</td>
<td>l</td>
</tr>
<tr>
<td>l</td>
<td>l</td>
</tr>
</table>
<form>
<input type="button" onclick="valignCell()" value="Vertical align cell content">
</form>
</body>
</html>



Vertical align the cell content in a table row

 
<html>
<head>
<script type="text/javascript">
function valignRow(){
    var x=document.getElementById("myTable").rows
    x[0].vAlign="top"
}
</script>
</head>
<body>
<table width="50%" id="myTable" border="1">
<tr>
<td height="50">1</td>
<td height="50">2</td>
</tr>
<tr>
<td height="50">1</td>
<td height="50">2</td>
</tr>
<tr>
<td height="50">1</td>
<td height="50">2</td>
</tr>
</table>
<form>
<input type="button" onclick="valignRow()" value="Vertical align row">
</form>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Table&oldid=2567»