Generating a Sine Table With JavaScript

I was looking at a C tutorial on Drexel University’s site when I saw an example for generating a sine table. I decided to try adapting this little program to JavaScript. I ended up creating a rudimentary table object to render the data in a HTML table with a caption and header. The calculations use the Math.atan() and Math.sin() functions from JavaScript’s Math object.

The original version of the code printed formatted ASCII text to standard out. I decided I wanted to output the data in a table that was creating dynamically using JavaScript. The resulting htmlTable object allows you to set a caption, add a row, add a header row, set the width and enable table striping. There are many more properties and methods that could be added to the table object. The most obvious being the ability to add a table footer.

Here is my JavaScript table object:

    1 // htmlTable object by Levi Senft
    2 var htmlTable = {
    3
    4     // Initialize basic html elements needed to create an empty table
    5     init: function() {
    6
    7         // Create the table html element
    8         this.table = document.createElement("table");
    9
   10         // Create the tbody html element
   11         this.tableBody = document.createElement("tbody");
   12
   13         // Create the thead html element
   14         this.tableHead = this.table.createTHead();
   15
   16     },
   17
   18     // Be default we aren't going to table stripe
   19     stripe: false,
   20
   21     // Place holder to store our table element
   22     table: null,
   23
   24     // Place holder to store our table body element
   25     tableBody: null,
   26
   27     // Place holder to store our table head element
   28     tableHead: null,
   29
   30     // Function to add a row to the table's body
   31     addRow: function(cellArray) {
   32
   33         // Create a new table row
   34         var newRow = document.createElement("tr");
   35
   36         // loop through the array of data passed to this function
   37         for (var i = 0; i < cellArray.length; i++) {
   38
   39             // Create and insert a new cell into the new table row
   40             var newCell = document.createElement("td");
   41
   42             // Insert data into the table cell
   43             newCell.innerHTML = cellArray[i];
   44             newRow.appendChild(newCell);
   45         }
   46
   47         // Insert the row at the bottom of the table
   48         this.tableBody.appendChild(newRow);
   49
   50     },
   51
   52     // Function to add a row to the table's body
   53     addHead: function(cellArray) {
   54
   55         // Create and insert a new table row into the table's thead element
   56         var newRow = this.tableHead.insertRow(0);
   57
   58         // Loop through the data passed as an array to the addHead function
   59         for (var i = 0; i < cellArray.length; i++) {
   60
   61             // Create a new th element
   62             var newCell = document.createElement("th");
   63
   64             // Add the array data to the cell's inner html
   65             newCell.innerHTML = cellArray[i];
   66
   67             // Append the cell to the row.
   68             newRow.appendChild(newCell);
   69
   70         }
   71
   72     },
   73
   74     // Set the table's caption
   75     setCaption: function(caption) {
   76
   77         this.table.createCaption().innerHTML = caption;
   78
   79     },
   80
   81     // Set the table's width
   82     setWidth: function(width) {
   83         this.table.style.width = width;
   84
   85     },
   86
   87     // Render the table into an element
   88     render: function(element) {
   89
   90         // append the dynamically generated tbody to the table element
   91         this.table.appendChild(this.tableBody);
   92
   93         // Did we want striping?
   94         if (this.stripe) {
   95
   96             // Loop through all the rows
   97             for (var i = 0; i < this.tableBody.rows.length; i++) {
   98
   99                 // Is this an even row?
  100                 if (i % 2 != 0) {
  101
  102                     // It is! append a class name that will have an
  103
  104                     // alternate background color
  105                     this.tableBody.rows[i].className = "even";
  106
  107                 }
  108             }
  109         }
  110
  111         // Append the table to the specified element
  112         element.appendChild(this.table);
  113
  114     }
  115
  116 };
  117

Here is the HTML page with an embedded script that generates the data for the sine table:

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3 <html xmlns="http://www.w3.org/1999/xhtml">
    4     <head>
    5         <title>
    6             JavaScript Sine Table
    7         </title>
    8         <style type="text/css">
    9 /*<![CDATA[*/
   10
   11 caption {
   12     font-family: san-serif, Helvetica, Verdana, Arial, sans-serif;
   13     font-size: 11px;
   14     font-style: italic;
   15     margin-left: auto;
   16     margin-right: auto;
   17 }
   18 table {
   19     border-collapse: collapse;
   20     margin-left: auto;
   21     margin-right: auto;
   22 }
   23
   24 table tbody td {
   25     border-color: #ccc;
   26     border-style: dashed;
   27     border-width: 1px;
   28     font-family: san-serif, Helvetica, Verdana, Arial, sans-serif;
   29     font-size: 13px;
   30     padding: 3px;
   31 }
   32
   33 table tbody tr.even,table tbody tr.even td {
   34     background-color: #e8e8e8;
   35 }
   36
   37 table tbody tr:hover {
   38     background-color: #bdd4fc;
   39 }
   40
   41 table thead th {
   42     font-family: san-serif, Helvetica, Verdana, Arial, sans-serif;
   43     font-size: 15px;
   44     padding: 3px;
   45 }
   46
   47 table thead tr {
   48     background-color: #000;
   49     color: #FFF;
   50 }
   51
   52         /*]]>*/
   53         </style>
   54     </head>
   55     <body>
   56         <div id="main"></div>
   57         <script src="htmltable.js" type="text/javascript"></script>
   58         <script type="text/javascript">
   59 //<![CDATA[
   60
   61         window.onload=function() {
   62
   63         // Declare variables
   64             // Get a reference to the element we will be filling with our table
   65             var tableCanvas = document.getElementById("main");
   66
   67             // create variables for our math functions
   68             var angle_degree = 0;
   69             var angle_radian, value;
   70             var pi = 4.0*Math.atan(1.0);
   71
   72         // Initilize the table
   73             htmlTable.init();
   74
   75         // Set the table caption
   76             htmlTable.setCaption("Compute a table of the sine function");
   77
   78         // insert a table row
   79             htmlTable.addHead(["Angle","Sine"]);
   80
   81         // When we render enable striping
   82             htmlTable.stripe = true;
   83
   84         // Set the table's width
   85             htmlTable.setWidth("400px");
   86
   87         // Do the sine stuff
   88             // loop until angle_degree > 360
   89             while (angle_degree <= 360) {
   90                 angle_radian = pi * angle_degree/180.0;
   91                 value = Math.sin(angle_radian);
   92
   93                 // Add the row to our table
   94                 htmlTable.addRow([angle_degree, value]);
   95
   96                 // increment the loop index
   97                 angle_degree += 10;
   98             }
   99
  100         // Render the table
  101             htmlTable.render(tableCanvas);
  102
  103         };
  104
  105         //]]>
  106         </script>
  107     </body>
  108 </html>
  109 

Here is a link to the demo.