JQuery 是一個常用的 JavaScript 庫,它可以幫助簡化開發過程。在 Web 開發中,表格是最常見的一種數據顯示方式之一。如果需要對表格中的數據進行修改,行內編輯是一種非常方便的方式。本文將介紹如何使用 JQuery 設置表格行內編輯。
$(function () { // 表格單元格被單擊時 $('td').click(function () { var td = $(this); var value = td.text(); // 獲取單元格的值 td.empty(); // 清空單元格內容 var input = $('<input>'); // 創建一個輸入框元素 input.attr('type', 'text'); input.val(value); input.appendTo(td); // 添加元素到單元格 input.focus(); // 將光標聚焦到輸入框 // 輸入框失去焦點時 input.blur(function () { var newValue = input.val(); td.text(newValue); // 更新單元格內容 }); // 在輸入框中按下回車鍵時 input.keydown(function (event) { if (event.keyCode === 13) { // 如果是回車鍵 var newValue = input.val(); td.text(newValue); // 更新單元格內容 } }); }); });
以上代碼是設置表格的編輯功能的核心代碼。當表格單元格被單擊時,代碼會創建一個輸入框元素并將其添加到單元格中。同時,輸入框的值被設置為單元格當前的文本值。在輸入框中輸入或修改數據后,將光標移出輸入框或按下回車鍵時,代碼會將輸入框中的值更新到單元格中,并將輸入框刪除。
需要注意的是,以上代碼只適用于簡單的表格編輯功能,如需實現更復雜的功能,需要根據自己的需求進行修改。
上一篇css div文字超出
下一篇css div上