js设置表头可编辑 _小知识

打开vscode建立一个测试页面，临时叫做 JsTable.html ，用于演示js若何设置表头可编纂。若是没有vscode ，利用其他编纂东西也是一样的

文章插图

2为了js操作的便当性，本文引入jquery进行js操作。先将jquery源文件下载到 JsTable.html 同级目次，然后在html页面中引入jquery

文章插图

3在测试页面中，添加一个table表格，设置table表格的边框，此时table表格是只读的，不克不及编纂的

文章插图

4在测试页面的底部，添加js代码，绑定table表头的点击事务，当点击表头区域的时辰将单位格替代当作input标签
// 绑定表格表头单位格的点击事务
$("#tblDemo thead th").on("click", function(event){
var $th = $(this);
// 若是th中已经有文本框了，就不处置这个事务了
var $input = $th.find("input");
【js设置表头可编辑】 if($input.length > 0){
return false;
}
// 若是th中没有文本框，就获取值，添加文本框
var val = $th.text();
$th.html("<input type='text' value=https://vvvtt.com/article/'" + val + "'/>");
// 阻止事务冒泡
event.stopPropagation();
});

文章插图

5绑定页面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());
});
});