js设置表头可编辑

1、打开vscode创建一个测试页面，暂时叫做 JsTable.html，用于演示js如何设置表头可编辑。如果没有vscode，使用其他编辑工具也是一样的

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

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()); });});

7、在编辑框内输入新的值，然后，点击表头之外的任何地方，就能将修改后的值显示在标题中，并且看起来是只读状态，再次点击又可以编辑了