一、背景
最近有一个小的需求，前端框架使用bootstrap动态渲染表格页面，需要在前端table表格中的某一列实现点击单元格可进行编辑并且提交数据至后台，要求只能指定的某一列进行编辑，其他列仍是不可编辑状态，经过实验，最终实现如下
二、实现
1，通过在table中添加input框实现
2，使用td标签的contentEditable="true"属性
三、代码部分（注释部分是第一种实现方式）
//给备注一列添加修改功能
window.onload=function(){
var rows = document.getElementById("tableBody").rows
for(var i=0;i<rows.length;i++){
remarkCell = rows[i].cells[10];
var nid = document.getElementById("tableBody").rows[i].getAttribute(‘nid‘);
remarkCell.setAttribute("nid",nid);
var str="<div><input id=‘remarkId‘ type=‘text‘ autocomplete=‘on‘ name=remark value=‘‘/></div>";
remarkCell.addEventListener("click",
function(){
var old_data=window.event.srcElement.innerText;
var nid = window.event.srcElement.getAttribute(‘nid‘)
window.event.srcElement.setAttribute("contentEditable","true")
window.event.srcElement.setAttribute("nid",nid)
<!-- window.event.srcElement.innerHTML=str;-->
<!-- document.getElementById("remarkId").value = old_data;-->
<!-- document.getElementById("remarkId").setAttribute("nid",nid)-->
}
);
remarkCell.addEventListener("focusout",
function(){
var new_data=window.event.srcElement.innerText
var nid=window.event.srcElement.getAttribute("nid")
console.log(new_data,nid)
<!-- var new_data=document.getElementById("remarkId").value;-->
<!-- var nid=document.getElementById("remarkId").getAttribute("nid");-->
$.ajax({
url: "/resources/update/" + nid + "/",
type: "POST",
data: {"remark":new_data},
success: function(res){
location.reload();
},
error: function(res){
alert("修改备注失败")
}
})
}
)
}
}