Question

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.

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

Here is how my html part of the code looks.

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

 </table>
</div>

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

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

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

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

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

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

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

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

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

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

        }
        trow.appendTo(tbody);
    }
    counter = 0;
}

Now, on jQuery part, I tried something like

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

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

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.

It would be awesome if anyone can help me with this.

Answer 1

To illustrate what I had suggested, I put together a jsFiddle to see if this matches what you are after:

http://jsfiddle.net/u4pAg/2/

Just a few <tr> with 7 <td> to match your <th> in your example. Each of the <td> contains an <input type="text" /> tag with the default value based on what was in your createDynamicTable() function.

I also added a stitch of jQuery… first, I am looping through all the inputs and store their ddefault value using jQuery’s .data() method (http://api.jquery.com/data/) for later use. I remove the default value on focus (but only if it is still the default value). If it is not the default value, it keeps that content there and just selects the content for easy replacing/updating (can be removed out if you don’t like the auto selecting). On blur, I check if the input is left blank and if so, I add back the previously stored default value. I through in some CSS in there as well for some visual interest.

EDIT——

If in your createDynamicTable() function, you update the points where you are setting the .text() for your <td> and instead set the .html() to include an input tag instead of just text, it turn out something like this (I just commented out the vars that it was looking for that were not defined, per my comment to your post):

http://jsfiddle.net/u4pAg/4/