jQuery表格單元格編輯是前端開發中一個常用且非常方便的功能。它使用戶能夠直接在表格中進行編輯,而不需要打開一個新的編輯頁面。
使用jQuery實現表格單元格編輯的過程比較簡單,以下是一個基本的代碼示例:
$(document).ready(function() { $('td').click(function() { var content = $(this).html(); $(this).html('<input type="text" value="' + content + '">'); $(this).children().first().focus(); $(this).children().first().keypress(function(e) { if (e.which == 13) { var newContent = $(this).val(); $(this).parent().html(newContent); } }); }); });
在以上代碼中,我們首先通過jQuery選擇器選擇所有的表格單元格(td元素),然后在單元格被點擊時,它的內容會被保存到一個變量中,并且被替換成一個文本框(input)。
接下來,我們將文本框設置為聚焦狀態,并且在按下"Enter"鍵時,將文本框中的新內容保存到單元格中。當用戶完成編輯并輸入的內容時,我們通過JavaScript將表格單元格中的內容更改為輸入的內容。
上述代碼只是一個基本的jQuery表格單元格編輯示例。你可以根據自己的需要來更改代碼,以實現更加高級的功能。
下一篇css div占位