• Demo and Introduction
  • The HTML and CSS Files
  • The jsLib_event.js and jsLib_dom_ready.js Files
  • The report_library.js File
  • The report_library.js File Continued
  • The Complete report_library.js File and the report.js File
  • The HTML and CSS Files

    Document Head and Necessary Files

    You will need several files to make this application work properly. I've highlighted the javascript files you'll need to link to the head of the document below. You will also need to style the table and application using CSS. You can combine the two listed style sheets into one style sheet if you like.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>Sort Quarterly Report</title>
    <link rel="stylesheet" type="text/css" href="report.css" />
    <link rel="stylesheet" type="text/css" href="table.css" />
    <script type="text/javascript" src="jslib_event.js"></script>
    <script type="text/javascript" src="jslib_dom_ready.js"></script>
    <script type="text/javascript" src="report_library.js"></script>
    <script type="text/javascript" src="report.js"></script>

    The HTML Table

    The first step to creating this application is to code an html table. The amount of items in the table doesn't matter, but it is very important that you give the table an id name and that you name the classes correctly.

    Looking at the HTML, you will see that items that would be in the same vertical column in the table (number 1 in each row, or number two in each row, etc.) have the same class names. These class names can be whatever you like in your table, but they need to be placed correctly.

    <div id="content">
        <h1>Sort Quarterly Report</h1>
        <table id="earnings_list" border="0" cellspacing="0" cellpadding="3">
                <th class="region">Region</th>
                <th class="quarter1">Q1</th>
                <th class="quarter2">Q2</th>
    			<th class="quarter3">Q3</th>
                <th class="quarter4">Q4</th>
                <td class="region">East</td>
                <td class="quarter1">$1,580.00</td>
                <td class="quarter2">$2,305.00</td>
    			<td class="quarter3">$2,710.00</td>
    			<td class="quarter4">$1,284.00</td>
                <td class="region">North</td>
                <td class="quarter1">$1,540.00</td>
                <td class="quarter2">$2,010.00</td>
    			<td class="quarter3">$2,450.00</td>
    			<td class="quarter4">$1,845.00</td>
                <td class="region">South</td>
                <td class="quarter1">$1,130.00</td>
                <td class="quarter2">$1,168.00</td>
    			<td class="quarter3">$1,847.00</td>
    			<td class="quarter4">$2,710.00</td>
                <td class="region">West</td>
                <td class="quarter1">$1,105.00</td>
                <td class="quarter2">$4,102.00</td>
    			<td class="quarter3">$2,391.00</td>
    			<td class="quarter4">$1,576.00</td>
                <td class="region">Totals</td>
                <td class="quarter1">$5,355.00</td>
                <td class="quarter2">$9,585.00</td>
    			<td class="quarter3">$9,398.00</td>
    			<td class="quarter4">$6,196.00</td>

    The CSS Style Sheets

    The first style sheet is the "table" style sheet. This is pretty straightforward. The most important thing to pay attention to is the cursor selector on line 11. This helps the user to realize that they can click on the arrows on the table because the cursor will turn into a pointer. Without this, the cursor will remain an arrow.

    #earnings_list {
        width: 85%;
        margin-bottom: 1em;
    #earnings_list th {
        border-bottom: 2px solid black;
    #earnings_list th img {
        cursor: pointer;
    .region {
        text-align: left;
    	width: 9em;
    .quarter1, .quarter2, .quarter3, .quarter4 {
        text-align: right;

    The second style sheet is the main style sheet for this application. It styles the colors and size of the application.

    body {
        font-family: Arial, Helvetica, sans-serif;
        background: #000000;
    #content {
        width: 600px;
        margin: 10px auto;
        padding: 5px 20px;
        background: #FFFFFF;
        border: 1px solid #000000;
    	color: black;
    .center { text-align: center; }

    Previous Next