Transforming JavaScript Data into HTML Tables with HyperLink : Table : HTML JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » HTML » Table »

 

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? -((a > b0));
}
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? -((a > b0));
}
function sortByLoser(a, b) {
    a = a.loser.toLowerCase();
    b = b.loser.toLowerCase();
    return ((a < b? -((a > b0));
}

</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>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo HTML
» Table