js設定表頭可編輯

2019-12-12 15:28:25

在網頁設計中，表頭通常是不能編輯的，假設遇到非要編輯的情況，該如何處理呢？本文就介紹使用js設定表頭可編輯，而且不使用其他列表控制元件，就對原生table標籤操作

開啟vscode建立一個測試頁面，暫時叫做 JsTable.html，用於演示js如何設定表頭可編輯。如果沒有vscode，使用其他編輯工具也是一樣的

為了js操作的便利性，本文引入jquery進行js操作。先將jquery原始檔下載到 JsTable.html 同級目錄，然後在html頁面中引入jquery

在測試頁面中，新增一個table表格，設定table表格的邊框，此時table表格是唯讀的，不能編輯的

在測試頁面的底部，新增js程式碼，係結table表頭的點選事件，當點選表頭區域的時候將單元格替換成input標籤

// 係結表格表頭單元格的點選事件

$("#tblDemo thead th").on("click", function(event){

var $th = $(this);

// 如果th中已經有文字方塊了，就不處理這個事件了

var $input = $th.find("input");

if($input.length > 0){

return false;

}

// 如果th中沒有文字方塊，就獲取值，新增文字方塊

var val = $th.text();

$th.html("<input type='text' value='" + val + "'/>");

// 阻止事件冒泡

event.stopPropagation();

});

係結頁面document的點選事件，當點選表頭之外的地方時，去掉表頭欄位的編輯狀態，恢復唯讀狀態。請注意，此處的演示僅僅只在介面操作，並沒有儲存資料庫，假設需要更新到資料庫，可以使用ajax的方式將變更後的值提交到資料庫即可

// 係結頁面的點選事件，點選頁面任何地方都將表頭的編輯狀態去掉

$(document).on("click", function(){

$("#tblDemo thead th input").each(function(){

var $input = $(this);

var $th = $input.parent("th:first");

$th.text($input.val());

});

在瀏覽器中開啟測試頁面，預設看到的列表是唯讀的，當點選表頭區域的時候，對應的單元格就會變成文字方塊可編輯狀態

在編輯框內輸入新的值，然後，點選表頭之外的任何地方，就能將修改後的值顯示在標題中，並且看起來是唯讀狀態，再次點選又可以編輯了