1
我是非常新的Java脚本和jQuery，并设法创建一个可编辑的表，将做我需要做的一些计算。问题是，当我使用tab时，我希望它将光标移动到下一个单元格。如何通过使用“选项卡”导航contentEditable表
这是第一次在这里发布，所以如果我听起来很可笑，请耐心等待！
这是我的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);
});
虽然我的目标是标签下一个单元格，我第一次尝试以下。
我认为上面的代码只会突出显示单元的一部分。但是，它会突出显示整个单元格。我查看了网页，但无法找到确切的答案，他们的桌子的制作方式与我的相似。
如果有人能帮助我，这将是非常棒的。
表的结构应该是可编辑的吗？或者只是其中的字段？如果只是每个单元格的内容，我会建议创建没有contentEditable的表格，而是选择使用标签，然后您可以在默认情况下选中它们。 – 2012-02-03 17:41:13
编辑：我相信我不能只是做input type =“text”，因为我创建函数的原因是用户可以单击一个按钮，它会创建额外的表来写入内容。在表中，它也执行基于用户输入的计算，所以我不确定如果你可以用我的代码举一些例子，那将会很棒！ – 2012-02-03 18:09:52
你可以发布代码中使用变量的部分：col，counter和masterCounter吗？ – 2012-02-03 18:19:25