CONTENTEDITABLE在HTML表格

隨着代碼：CONTENTEDITABLE在HTML表格

<table> 
<tr><td contenteditable>My_Name</td><td>Surname</td></tr> 
<tr><td contenteditable>My_Name2</td><td>Surname2</td></tr> 
</table>

您可以編輯HTML表中的單元格。我的問題是當我編輯單元格並按輸入時，它會在單元格中創建一個新行。我真正想要的是，如果我按下回車鍵，我會轉到剛剛編輯的單元格下方的單元格，以便我可以編輯該單元格。

目前我必須使用鼠標才能進入下一個單元格，但是如果我可以按輸入並轉到單元格，它將幫助我更快地編輯單元格。另外更新後的數據將存儲在我的數據庫中，所以我也不希望在數據庫中存儲不必要的空間。

但我不確定我能做些什麼。有什麼我能看的例子嗎？

來源

2014-01-06 Jason Samuels

閱讀鍵盤的'輸入'鍵，它通過設置焦點在別處，也許是下一個TD'逃離'版本。 –

@Vanda，有沒有答案回答你的問題？ –

@NickG這是Jason Samuels的問題。 –

Demo顯示如何捕獲和preventDefault操作輸入按鍵。

下面是做的伎倆代碼：

$('table').bind('keypress', function (e) { 
     var code = e.keyCode || e.which; 
     if (code == 13) { 
      console.log("Enter pressed"); 
      e.preventDefault(); 
      // focus 'td' in next column using jQuery '.focus()' 
     } 
     return false; 
    });

來源

2014-01-06 05:25:58

您應該提到這個代碼需要JQuery，因爲'$'不是標準ECMAScript的一部分。 – 2014-01-06 05:31:44

@LegoStormtroopr你不認爲編輯答案，說他們使用jQuery而不是香草JavaScript會足夠嗎？或者就此而言，留下評論？如果建議的答案是徹頭徹尾的「沒有用處」，則使用Downvoting。而且，你的先生似乎正在投降。無論如何，這個問題的其他答案已經被編輯，以提到使用jQuery。考慮撤銷你的反對票。 –

你必須明白，「CONTENTEDITABLE」是使你的標記表現得像一個<textarea>。通常，人們按選項卡鍵可以從表單字段跳到另一個表單字段。

使用jQuery javascript庫，您可以讀取鍵盤的輸入鍵，它通過設置焦點在別處，也許下一個td與contenteditable'逃脫'的版本。：

$(document).ready(function() { 
    var $editableTd = $('td[contenteditable]'); 
    $editableTd.bind('keypress', function (e) { 
     var code = e.keyCode || e.which; 
     if (code == 13) { 
      var ind = $editableTd.index(this); //check next td to target 
      $editableTd.eq(ind + 1).focus(); //set focus to it 
      e.preventDefault(); //do 'nothing' 
     } 

    }); 
});

jsFiddled here

來源

2014-01-06 05:27:41

您應該提到這個代碼需要JQuery，因爲'$'不是標準ECMAScript的一部分。 – 2014-01-06 05:32:19

免責聲明：此代碼需要的JQuery。

這樣的事情？ http://jsfiddle.net/v2Tdn/3/

$('td').keypress(function(evt){ 
    if(evt.which == 13){ 
     event.preventDefault(); 
     var cellindex = $(this).index() 
     // get next row, then select same cell index 
     var rowindex = $(this).parents('tr').index() + 1 
     $(this).parents('table').find('tr:eq('+rowindex+') td:eq('+cellindex+')').focus() 
    } 
})

* UPDATE *

注意，當您按下進入我已經更新了的jsfiddle也選擇文本。前面的例子只關注下一個TD，請使用http://jsfiddle.net/v2Tdn/1/。

來源

2014-01-06 05:27:57

你應該提到這個代碼需要JQuery，因爲'$'不是標準ECMAScript的一部分。 – 2014-01-06 05:31:05

@LegoStormtroopr免責聲明已添加。 Downvote刪除？ –

當答案完全有效並且只是忘記提及jQuery時，需要激怒人們在downvote按鈕上跳躍的方式。只需添加評論和upvote，特別是因爲這個答案有效，並有小提琴來證明它！ – patrick

我已經在JS和HTML之前構建了一個完全可編輯的表格「Grid」，其背後的邏輯簡單如下： 1-在佈局所有列後添加行爲列並添加指向編輯功能每一行中的「編輯」鏈接，在此編輯鏈接通過行索引所以..它看起來就像是：

<a href='javascript:void(0)' id='EditBtn' onclick='Edit("+ rowIndex +")'>Edit</a>"

2 - 你的編輯功能簡單的循環，你的列使用rowIndex並將文本值替換爲文本框標記

"<input type='text' id='nominal' id='editableField' >" + tdTxt + "</input >"

只需避免使「編輯」列可編輯

現在，您應該有一個完全可編輯的行。關於最後一件事，就是在「編輯」鏈接旁邊添加一個「取消」鏈接，該鏈接將再次在「行」列上循環，例如「編輯」鏈接，並將「文本」標籤替換爲跨度或僅使用原始值的純HTML。

您可能想知道我將如何獲得origianl td值，在這種情況下，我們添加了一個隱藏字段，可以使td值更加豐富，因此當用戶在編輯後單擊取消時。我們得到編輯前的單元格原始值，

希望有幫助。

來源

2016-07-25 18:43:23

CONTENTEDITABLE在HTML表格

回答

相關問題