Let's Get Started

Let's get started with a JavaScript Table Page!

Open Notepad++
1. Open your index.html file
2. Open your styles.css file
3. Choose: File -> New
4. Copy the JavaScript Table Page Template (HTML) code (below)
5. Paste that code into your new file
6. Choose: Save
7. Save the file as: js_table.html
8. Change the Save as type:
  to: Hyper Text Markup Language file (*.html)
9. Change your page title, your Author name, and your page heading to something appropriate
10. Choose: File -> New
11. Copy the Table Page JavaScript (JS) code (below)
12. Paste that code into your new file
13. Choose: Save
14. Save the file in your includes folder as: table.js
15. Change the Save as type:
  to: JavaScript File (*.js)
16. In your index.html file
17. Add a link to this page.
  Change: <li>Use JavaScript to Create a Table Page</li>
  to: <li><a href="js_table.html">Use JavaScript to Create a Table Page</a></li>
18. Save your changes
19. Click: Run
20. Choose: Launch in IE
  or Launch in Chrome
  or Launch in Firefox
21. View your web page
22. Make any changes
23. Save your changes

JavaScript Table Page Template (HTML)

Tables should NEVER be used for page layout!

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- Author: put your name in this comment line --> 
    <link href="includes/styles.css" rel="stylesheet"/>
    <script src="includes/table.js"></script>
  </head>
  <body onload="displayTable();">
    <h2>put page heading here</h2>
    <div id="table">
    </div>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

Table Page JavaScript (JS)

function displayTable() {
  // Setup arrays
  var carMakes = ["Buick", "Chevrolet", "Cadillac", "GMC"];
  var carModels = ["Encore", "Equinox", "Escalade", "Terrain"];
  
  // Setup table header HTML
  var tableCode = "<table style=\"background-color: #00F; border-radius: 22px;\">\n";
  tableCode    += "  <tr>\n";
  tableCode    += "    <th>Row<br/>Number</th>\n";
  tableCode    += "    <th>Make<br/>Name</th>\n";
  tableCode    += "    <th>Model<br/>Name</th>\n";
  tableCode    += "  </tr>\n";
  
  // Walk through arrays
  for (var  i = 0; i < carMakes.length; i++) {
    if (i % 2 == 0) {
      tableCode += "  <tr class=\"evenRow\">\n";
    } else {
      tableCode += "  <tr class=\"oddRow\">\n";
    }
    tableCode += "    <td style=\"text-align: center;\">"
                 + (i + 1) + "</td>\n";
    tableCode += "    <td style=\"text-align: center;\">" 
                 + carMakes[i] + "</td>\n";
    tableCode += "    <td style=\"text-align: center;\">" 
                 + carModels[i] + "</td>\n";
    tableCode += "  </tr>\n";
  }
  
  // setup table ending HTML
  tableCode += "</table>\n";
  
  // display HTML code
  document.getElementById("table").innerHTML = tableCode;
}

Example