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