title: How to navigate through contentEditable Table using "tab"
body: <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>