使用原生js实现对table中的某个单元格进行编辑并提交后台修改数据

一、背景

　　最近有一个小的需求，前端框架使用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("修改备注失败")
                            }
                        })
                    }
                )
        }
}