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 条评论