JavaScript DHTML/HTML/Table — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 10:23, 26 мая 2010
Содержание
- 1 Accessing userProfile Data
- 2 userProfile Object
- 2.1 Adding cells to a table row
- 2.2 Adding table rows
- 2.3 Align the cell content in a single cell
- 2.4 Align the cell content in a table row
- 2.5 Change table border width and cell padding
- 2.6 Change table row height
- 2.7 Change the cell content in a table row
- 2.8 Change the cellPadding and cellSpacing of a table
- 2.9 Change the colspan of a table row
- 2.10 Change the width of a table border
- 2.11 Create a table
- 2.12 Create table caption
- 2.13 Cycling Through Table frame Property Values
- 3 TABLE.frame Property
- 4 TABLE.rules Property
- 5 Modifying Tables
- 6 Modifying Table Columns
- 7 Modifying Table Cell Content
- 8 Super Bowl Games
- 9 Transforming JavaScript Data into HTML Tables
- 10 Transforming JavaScript Data into HTML Tables
- 11 The offsetParent Property
Accessing userProfile Data
<source lang="html4strict">
/* 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 : " " } // clean up after ourselves navigator.userProfile.clearRequest() } else { alert("This example requires IE4+ for Windows.") }
} </SCRIPT> </HEAD> <BODY onLoad="loadTable()">
userProfile Object
vCard Property | Value |
---|
</BODY> </HTML>
</source>
Adding cells to a table row
<source lang="html4strict">
<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>
d | d |
d | d |
1 | 2 |
<form> <input type="button" onclick="addCell()" value="Add cell"> </form> </body> </html>
</source>
Adding table rows
<source lang="html4strict">
<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>
d | d |
d | d |
Row3 cell1 | Row3 cell2 |
Row4 cell1 | Row4 cell2 |
Row5 cell1 | Row5 cell2 |
<form> <input type="button" onclick="insRow()" value="Insert row"> </form> </body> </html>
</source>
Align the cell content in a single cell
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function alignCell(){
var x=document.getElementById("myTable").rows[0].cells x[0].align="center"
} </script> </head> <body>
First cell | Second cell |
Third cell | Fourth cell |
<form> <input type="button" onclick="alignCell()" value="Align cell content"> </form> </body> </html>
</source>
Align the cell content in a table row
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function alignRow(){
var x=document.getElementById("myTable").rows x[0].align="right"
} </script> </head> <body>
1 | 2 |
1 | 2 |
1 | 2 |
<form> <input type="button" onclick="alignRow()" value="Align first row"> </form> </body> </html>
</source>
Change table border width and cell padding
<source lang="html4strict">
<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();">
adsf |
</body> </html>
</source>
Change table row height
<source lang="html4strict">
<html> <head> <script type="text/javascript">
function specifyRow(){ var x=document.getElementById("myTable").rows x[1].height="100" }
</script> </head> <body>
d | d |
d | d |
Row3 cell1 | Row3 cell2 |
Row4 cell1 | Row4 cell2 |
Row5 cell1 | Row5 cell2 |
<form>
<input type="button" onclick="specifyRow()" value="Change height of third row">
</form> </body> </html>
</source>
Change the cell content in a table row
<source lang="html4strict">
<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>
d | d |
d | d |
<form> <input type="button" onclick="changeContent()" value="Change content"> </form> </body> </html>
</source>
Change the cellPadding and cellSpacing of a table
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function padding(){
document.getElementById("myTable").cellPadding="25"
} function spacing(){
document.getElementById("myTable").cellSpacing="25"
} </script> </head> <body>
a | b |
c | d |
<form>
<input type="button" onclick="padding()" value="Change Cellpadding"> <input type="button" onclick="spacing()" value="Change Cellspacing">
</form> </body> </html>
</source>
Change the colspan of a table row
<source lang="html4strict">
<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>
cell 1 | cell 2 | ||||||
cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 |
<form> <input type="button" onclick="setColSpan()" value="Change colspan"> </form> </body> </html>
</source>
Change the width of a table border
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function changeBorder(){
document.getElementById("myTable").border="20"
} </script> </head> <body>
a | b |
c | d |
<form>
<input type="button" onclick="changeBorder()" value="Change Border">
</form> </body> </html>
</source>
Create a table
<source lang="html4strict">
<head> <title></title> </script> </head> <body>
<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>
</source>
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function caption(){
var x=document.getElementById("myTable").createCaption() x.innerHTML="My table caption"
} </script> </head> <body>
d | d |
d | d |
Row3 cell1 | Row3 cell2 |
<form> <input type="button" onclick="caption()" value="Create caption"> </form> </body> </html>
</source>
Cycling Through Table frame Property Values
<source lang="html4strict">
/* 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>
TABLE.frame Property
<FORM NAME="controls"> <FIELDSET> <LEGEND>Cycle Table Edge Visibility</LEGEND>
<INPUT TYPE="button" VALUE="Cycle" onClick="rotateBorder(0)"> | <INPUT TYPE="button" VALUE="Stop" onClick="stopRotate()"> |
</FIELDSET> </TABLE> </FIELDSET> </FORM>
River | Outflow | Miles | Kilometers |
---|---|---|---|
Nile | Mediterranean | 4160 | 6700 |
Congo | Atlantic Ocean | 2900 | 4670 |
Niger | Atlantic Ocean | 2600 | 4180 |
Zambezi | Indian Ocean | 1700 | 2740 |
</BODY> </HTML>
</source>
Cycling Through Table rows Property Values
<source lang="html4strict">
/* 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>
TABLE.rules Property
<FORM NAME="controls"> <FIELDSET> <LEGEND>Cycle Table Rule Visibility</LEGEND>
<INPUT TYPE="button" VALUE="Cycle" onClick="rotateBorder(0)"> | <INPUT TYPE="button" VALUE="Stop" onClick="stopRotate()"> |
</FIELDSET> </TABLE> </FIELDSET> </FORM>
River | Outflow | Miles | Kilometers |
---|---|---|---|
Nile | Mediterranean | 4160 | 6700 |
Congo | Atlantic Ocean | 2900 | 4670 |
Niger | Atlantic Ocean | 2600 | 4180 |
Zambezi | Indian Ocean | 1700 | 2740 |
</BODY> </HTML>
</source>
Deleting table rows
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function deleteRow(i){
document.getElementById("myTable").deleteRow(i)
} </script> </head> <body>
Row 1 | <input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"> |
Row 2 | <input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"> |
Row 3 | <input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"> |
</body> </html>
</source>
Inserting/Removing Row Elements
<source lang="html4strict">
/* 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()">
Modifying Tables
<FORM NAME="controls"> <FIELDSET> <LEGEND>Add/Remove Rows</LEGEND>
<INPUT TYPE="button" VALUE="Append 1 Row" onClick="appendRow(this.form)"> | <INPUT TYPE="button" VALUE="Insert 1 Row" onClick="addRow(this.form)"> at index:
<SELECT NAME="insertIndex"> <OPTION VALUE="0">0</SELECT> |
<INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row" DISABLED
onClick="removeRow(this.form)"> at index: <SELECT NAME="deleteIndex"> <OPTION VALUE="0">0</SELECT> |
</FIELDSET> <FIELDSET> <LEGEND>Add/Remove THEAD and TFOOT</LEGEND>
<INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD"
onClick="insertTHEAD(this.form)"> |
<INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT"
onClick="insertTFOOT(this.form)"> |
</FIELDSET> <FIELDSET> <LEGEND>Add/Remove Caption</LEGEND>
<INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption" onClick="insertCaption(this.form)"> | Text: <INPUT TYPE="text" NAME="captionText" SIZE=40 VALUE="Sample Caption"> | <INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption" DISABLED onClick="removeCaption(this.form)"> |
</FIELDSET> </FORM>
</BODY> </HTML>
</source>
Insert table row: the uniqueID Property
<source lang="html4strict">
/* 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>
Row ID | Data |
---|---|
firstDataRow | Fred |
secondDataRow | Jane |
<FORM>
Enter text to be added to the table:
<INPUT TYPE="text" NAME="input" SIZE=25>
<INPUT TYPE="button" VALUE="Insert Row" onClick="addRow(this.form.input.value)">
</FORM>
</BODY>
</HTML>
</source>
Modifying Table Columns
<source lang="html4strict">
/* 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()">
Modifying Table Columns
<FORM NAME="controls"> <FIELDSET> <LEGEND>Add/Remove Left Column</LEGEND>
<INPUT TYPE="button" NAME="addColumn" VALUE="Insert Left Column" onClick="insertColumn(this.form)"> | <INPUT TYPE="button" NAME="removeColumn" VALUE="Remove Left Column" DISABLED onClick="deleteColumn(this.form)"> |
</FIELDSET> </TABLE> </FIELDSET> </FORM>
River | Outflow | Miles | Kilometers |
Nile | Mediterranean | 4160 | 6700 |
Congo | Atlantic Ocean | 2900 | 4670 |
Niger | Atlantic Ocean | 2600 | 4180 |
Zambezi | Indian Ocean | 1700 | 2740 |
</BODY> </HTML>
</source>
Replacing Table Cell Content
<source lang="html4strict">
/* 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 = "" + total + ""
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)">
Modifying Table Cell Content
<FORM NAME="orderForm">
Product Description | Price Each | Quantity | Total |
---|---|---|---|
Wonder Widget 9000 | US$125.00 | <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"> |
<SCRIPT LANGUAGE="JavaScript"> if (Nav4) { var placeHolder = " " placeHolder += " " document.write("") document.write("") document.write("" + placeHolder + "") } else { document.write("" +" ") } </SCRIPT> |
</FORM> </BODY> </HTML>
</source>
Specify frames of a table
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function aboveFrames(){
document.getElementById("myTable").frame="above"
} function belowFrames(){
document.getElementById("myTable").frame="below"
} </script> </head> <body>
a | b |
c | d |
<form>
<input type="button" onclick="aboveFrames()" value="Show above frames"> <input type="button" onclick="belowFrames()" value="Show below frames">
</form> </body> </html>
</source>
Specify rules for a table
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function rowRules(){
document.getElementById("myTable").rules="rows"
} function colRules(){
document.getElementById("myTable").rules="cols"
} </script> </head> <body>
d | d |
d | d |
Row3 cell1 | Row3 cell2 |
Row4 cell1 | Row4 cell2 |
Row5 cell1 | Row5 cell2 |
<form> <input type="button" onclick="rowRules()" value="Show row borders"> <input type="button" onclick="colRules()" value="Show col borders"> </form> </body> </html>
</source>
Tabular data in Javascript with hyper link
<source lang="html4strict">
<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")">
Super Bowl Games
Bowl | <a href="#" title="Sort by Year" onclick="sortTable(this)">Year</a> | <a href="#" title="Sort by Winning Team" onclick="sortTable(this)">Winner</a> | <a href="#" title="Sort by Losing Team" onclick="sortTable(this)">Loser</a> | 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> |
---|
</body> </html>
</source>
Transforming JavaScript Data into HTML Tables
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<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")">
Transforming JavaScript Data into HTML Tables
Year | Host Country | Winner | Loser | Score (Win - Lose) |
---|
</body> </html>
</source>
Transforming JavaScript Data into HTML Tables with HyperLink
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<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")">
Transforming JavaScript Data into HTML Tables
<a href="#" title="Sort by Year" onclick="return sortTable(this)">Year</a> | <a href="#" title="Sort by Country" onclick="return sortTable(this)">Host Country</a> | <a href="#" title="Sort by Winning Team" onclick="return sortTable(this)">Winner</a> | <a href="#" title="Sort by Losing Team" onclick="return sortTable(this)">Loser</a> | 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> |
---|
</body> </html>
</source>
Using the cloneNode Method
<source lang="html4strict">
/* 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">
Row 1, Cell 1 | Row 1, Cell 2 |
Row 2, Cell 1 | Row 2, Cell 2 |
Row 3, Cell 1 | Row 3, Cell 2 |
Row 4, Cell 1 | Row 4, Cell 2 |
Row 5, Cell 1 | Row 5, Cell 2 |
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT> </BODY> </HTML>
</source>
Using the Data Binding record Number Property
<source lang="html4strict">
/* 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>
Academy Awards 1978-1997 (Click on a table row to extract data from one record.)
The award for Best Actor of went to for his outstanding achievement in the film .
Year | Film | Director | Actress | Actor |
<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=" ">
</OBJECT> </BODY> </HTML>
</source>
Using the offsetParent Property
<source lang="html4strict">
/* 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>
The offsetParent Property
After the document loads, the script positions a small image in the upper left corner of the second table cell.
This is the first cell | This is the second cell. |
</BODY> </HTML>
</source>
Vertical align the cell content in a single cell
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function valignCell(){
var x=document.getElementById("myTable").rows[0].cells x[0].vAlign="bottom"
} </script> </head> <body>
l | l |
l | l |
<form> <input type="button" onclick="valignCell()" value="Vertical align cell content"> </form> </body> </html>
</source>
Vertical align the cell content in a table row
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function valignRow(){
var x=document.getElementById("myTable").rows x[0].vAlign="top"
} </script> </head> <body>
1 | 2 |
1 | 2 |
1 | 2 |
<form> <input type="button" onclick="valignRow()" value="Vertical align row"> </form> </body> </html>
</source>