使用原生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("修改備注失敗")
                            }
                        })
                    }
                )
        }
}