js設置表頭可編輯

打開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());

});

在瀏覽器中打開測試頁面，默認看到的列表是只讀的，當點擊表頭區域的時辰，對應的單位格就會釀成文本框可編纂狀況

在編纂框內輸入新的值，然后，點擊表頭之外的任何處所，就能將點竄后的值顯示在題目中，而且看起來是只讀狀況，再次點擊又可以編纂了

0 條評論