Table with Keyboard Navigation - beta

Dynamically generated table of random numbers allows navigation and editing with keyboard arrows and F2. Help from: http://stackoverflow.com/questions/22817451/use-arrow-keys-to-navigate-an-html-table http://www.itgeared.com/articles/1503-how-to-create-dynamic-html-table-javascript/

by Ben

HTML

<div id="div1"></div>
<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
            <th>Col 6</th>
            <th>Col 7</th>
            <th>Col 8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td tabindex="1">1</td>
            <td tabindex="2">2</td>
            <td tabindex="3">3</td>
            <td tabindex="4">4</td>
            <td tabindex="5">5</td>
            <td tabindex="6">6</td>
            <td tabindex="7">7</td>
            <td tabindex="8">8</td>
        </tr>
        <tr>
            <td tabindex="10">10</td>
            <td tabindex="11">11</td>
            <td tabindex="12">12</td>
            <td tabindex="13">13</td>
            <td tabindex="14">14</td>
            <td tabindex="15">15</td>
            <td tabindex="16">16</td>
            <td tabindex="17">17</td>
        </tr>
        <tr>
            <td tabindex="10">10</td>
            <td tabindex="11">11</td>
            <td tabindex="12">12</td>
            <td tabindex="13">13</td>
            <td tabindex="14">14</td>
            <td tabindex="15">15</td>
            <td tabindex="16">16</td>
            <td tabindex="17">17</td>
        </tr>
        <tr>
            <td tabindex="1">1</td>
            <td tabindex="2">2</td>
            <td tabindex="3">3</td>
            <td tabindex="4">4</td>
            <td tabindex="5">5</td>
            <td tabindex="6">6</td>
            <td tabindex="7">7</td>
            <td class="dropdown" tabindex="8"> 
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
            </td>
        </tr>
    </tbody>
</table>
<div id="edit">
    <form>
        <input type="text" id="text" value="To edit..." />
        <input type="submit" value="Save" />
    </form>
</div>

CSS

#div1 {
    margin:10px;
    font-size:1.25em;
}
* {
    font-size: 12px;
    font-family:'Helvetica', Arial, Sans-Serif;
    box-sizing: border-box;
}
table, th, td {
    border-collapse:collapse;
    border: solid 1px #ccc;
    padding: 5px 20px;
    text-align: center;
}
th {
    background: #0f4871;
    color: #fff;
}
tr:nth-child(2n) {
    background: #f1f1f1;
}
td:hover {
    color: #fff;
    background: #CA293E;
}
td:focus {
    background: #f44;
}
.editing {
    border: 2px dotted #c9c9c9;
}
#edit {
    display: none;
}

JavaScript

// ### This is the transition version from the static table to the dynamic table


var totalRows = 4; // including header row
var cellsInRow = 6;
var min = 1;
var max = 10;

function drawTable() {
    // get the reference for the body
    var div1 = document.getElementById('div1');

    // creates a <table> element
    var tbl = document.createElement("table");

    // creating rows
    for (var r = 0; r < totalRows; r++) {
        var row = document.createElement("tr");

        if (r == 0) {
            // create table header row
            for (var c = 0; c < cellsInRow; c++) {
                var cell = document.createElement("th");
                var cellText = document.createTextNode('Col' + '\u00a0' + (c + 1));
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

        } else {
            // create cells in row
            for (var c = 0; c < cellsInRow; c++) {
                var cell = document.createElement("td");
                getRandom = Math.floor(Math.random() * (max - min + 1)) + min;
                var cellText = document.createTextNode(Math.floor(Math.random() * (max - min + 1)) + min);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
        }
        tbl.appendChild(row); // add the row to the end of the table body
    }

    div1.appendChild(tbl); // appends <table> into <div1>
}
window.onload = drawTable();




var currCell = $('td').first();
var editing = false;

// User clicks on a cell
$('td').click(function () {
    currCell = $(this);

    var col = $(this).parent().children().index($(this)) + 1;
    var row = $(this).parent().parent().children().index($(this).parent()) + 1;
    alert('Row: ' + row + ', Column: ' + col);

    //drawTable();
    //    alert("Column: " + (currCell.index() + 1));
    //   edit();
});

// Show edit box
function edit() {
    editing = true;
    currCell.toggleClass("editing");
    $('#edit').show();
   ...