Question

我是java脚本和jQuery的新手，并设法创建一个可编辑的表，我将需要做一些计算。问题是，当我使用tab时，我希望它将光标移动到下一个单元格。

这是第一次发布在这里，所以如果我听起来很荒谬，请耐心等待我！

以下是我的html部分代码的外观。

<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>

之后，在javascript中，我有功能（我在网上找到）将创建动态表。

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;
}

现在，在jQuery部分，我尝试了类似

的东西

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

尽管我的目标是选择下一个单元格，但我首先尝试了以下内容。

我上面的代码只会突出显示单元格的一部分。但是，它会突出整个细胞。我确实环顾网络，但无法找到确切的答案，他们的桌子是如何制作的，与我的相似。

如果有人能帮助我，这将是非常棒的。

Answer 1

为了说明我的建议，我把一个jsFiddle放在一起，看看它是否符合你的要求：

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

只有少数几个与你的例子匹配的7。每个都包含一个标签，其默认值基于createDynamicTable（）函数中的内容。

我还添加了一个jQuery的针脚......首先，我循环遍历所有输入并使用jQuery的.data（）方法（http://api.jquery.com/data/）存储它们的ddefault值以便稍后使用使用。我删除焦点上的默认值（但仅当它仍然是默认值时）。如果它不是默认值，它会将该内容保留在那里，只选择内容以便于替换/更新（如果您不喜欢自动选择，可以将其删除）。在模糊时，我检查输入是否留空，如果是，我将添加以前存储的默认值。我通过一些CSS在那里也有一些视觉兴趣。

EDIT ------

如果在你的createDynamicTable（）函数中，你更新了你为你设置.text（）的点，而是将.html（）设置为包含一个输入标记而不仅仅是文本，结果是像这样（我只是评论了它所寻找的那些未定义的变量，根据我对你的帖子的评论）：

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

如何使用“tab”浏览contentEditable表

1 个答案: