How to navigate through contentEditable Table using "tab"
<p>I am very new with java script and jQuery and managed to create a editable table that will do some calculations I needed to do. Problem is, when I use tab, I would like it to move the cursor to next cell. </p>

<p>This is first time posting here as well so please bear with me if I sound ridiculous!</p>

<p>Here is how my html part of the code looks.</p>

<pre><code>&lt;div id = "showTable" contentEditable="true" tabindex="0"&gt;
&lt;table id="tbl" width = "850px" border="1"&gt;
    &lt;tbody&gt;
    &lt;th&gt;Date Worked&lt;/th&gt;
    &lt;th&gt;Start&lt;/th&gt;
    &lt;th&gt;Meal break&lt;/th&gt;
    &lt;th&gt;End&lt;/th&gt;
    &lt;th&gt;Hourly Wage&lt;/th&gt;
    &lt;th&gt;Gross Earnings&lt;/th&gt;
    &lt;th&gt;Pay Date&lt;/th&gt;
    &lt;/tbody&gt;

 &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>After, in the javascript, I have function (which I found online) that will create dynamic table.</p>

<pre><code>function createDynamicTable(tbody, rows, cols) 
{
    if (tbody == null || tbody.length &lt; 1) return;
    for (var r = 0; r &lt; rows; r++) 
    {
        var trow = $("&lt;tr&gt;");
        for (var c = 0; c &lt; cols; c++) 
        {
            if(c == 0)
            {
                var dateWorked = "mm/dd/yyyy" ;
                $("&lt;td&gt;")
                        .addClass("tableCell")
                        .text(dateWorked)
                        .data("col", c)
                        .appendTo(trow);
                col[counter] = dateWorked;
                counter++;
                masterCounter++;
            }
            else if (c == 1)
            {
                var startTime = "h:mm AM/PM";
                $("&lt;td&gt;")
                        .addClass("tableCell")
                        .text(startTime)
                        .data("col", c)
                        .appendTo(trow);

                col[counter] = startTime;
                counter++;
                masterCounter++;
            }
            else if (c == 2)
            {
                var mealBreakMin = "time in minutes";
                $("&lt;td&gt;")
                        .addClass("tableCell")
                        .text(mealBreakMin)
                        .data("col", c)
                        .appendTo(trow);

                col[counter] = mealBreakMin;
                counter++;
                masterCounter++;
            }
            else if (c == 3)
            {
                var endTime = "h:mm AM/PM";
                $("&lt;td&gt;")
                        .addClass("tableCell")
                        .text(endTime)
                        .data("col", c)
                        .appendTo(trow);

                col[counter] = endTime;
                counter++;
                masterCounter++;
            }
            else if (c == 4)
            {
                var hourlyWage = "$-.--";
                $("&lt;td&gt;")
                        .addClass("tableCell")
                        .text(hourlyWage)
                        .data("col", c)
                        .appendTo(trow);

                col[counter] = hourlyWage;
                counter++;
                masterCounter++;
            }

            if(r == 6)
            {
                if (c == 5)
                {
                    var grossPay = "$-.--";
                    $("&lt;td&gt;")
                    .addClass("tableCell")
                    .text(grossPay)
                    .data("col", c)
                    .appendTo(trow);

                    col[counter] = hourlyWage;
                    counter++;
                    masterCounter++;
                }

                else if (c == 6)
                {
                    var payDate = "mm/dd/yyyy";
                    $("&lt;td&gt;")
                    .addClass("tableCell")
                    .text(payDate)
                    .data("col", c)
                    .appendTo(trow);

                    col[counter] = hourlyWage;
                    counter++;
                    masterCounter++;
                }
            }

        }
        trow.appendTo(tbody);
    }
    counter = 0;
}
</code></pre>

<p>Now, on jQuery part, I tried something like</p>

<pre><code>$(".tableCell").live('click', function(e) {
    document.execCommand('selectAll', false, null);
});
</code></pre>

<p>Even though my goal is to tab to next cell, I first tried the following.</p>

<p>I thught above code will highlight one part of the cell only. However, it will highlight entire cell. I did look around the web but could not find exact answer where how their table was made was similar to mine. </p>

<p>It would be awesome if anyone can help me with this.</p>
