Table with Keyboard Navigation

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

HTML

// I got the arrow keys working again in this dynamic version. Ben 8/3/2015
<BR>// Press Enter to edit the cell contents.
<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>
    </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:100px;
}
* {
    font-size: 100px;
    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

//---------------------------------------------------
// Dynamically generated table idea from here:
// http://www.itgeared.com/articles/1503-how-to-create-dynamic-html-table-javascript/

var totalRows = 6; // including header row
var cellsInRow = 7;
var min = 100;
var max = 999;

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

    // creates a <table> element
    var tbl = document.createElement("table");
    tbl.setAttribute("class", "table");
    tbl.setAttribute("id", "example1"); // set the id of the table for future reference

    // 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);
                cell.setAttribute("tabindex", c + 1);
            }
        }
        tbl.appendChild(row); // add the row to the end of the table body
    }

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

//------------------------------------------------------------
// jQuery for arrow keys and editing idea from here:
// http://stackoverflow.com/questions/22817451/use-arrow-keys-to-navigate-an-html-table

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