软工终结日报-直接编辑html表格 6/6

我们经常遇见这种能够直接将在页面上直接进行编辑或者删除的网站，今天呢我们就来尝试用js来实现下它的效果吧！

首先，我们表格里的值肯定不能一开始就呆在输入框里，肯定是要有一个从文字变成输入框的过程的

这段的代码我是这样实现的：

function totext(id){
        var tab=document.getElementById(id);
        var c=tab.parentNode;
        c.removeChild(tab);
        var e4=document.createElement("input");
        e4.setAttribute("type", "text");
        e4.setAttribute("id", id);
        e4.setAttribute("value", id);
        e4.setAttribute("onblur", "tospan('"+id+"')");
        e4.setAttribute("size", id.length);
        c.appendChild(e4);
    }

当鼠标点击相关文字时，文字就会变成以文字原貌为ID的input（text）标签元素

 接下来是鼠标点击其他地方，失去焦点转化回<span>

实现代码如下：

    function tospan(id){
        var tab=document.getElementById(id);
        var t=tab.value;
        var c=tab.parentNode;
        c.removeChild(tab);
        var e4=document.createElement("span");
        e4.setAttribute("id", t);
        e4.appendChild(document.createTextNode(t));
        e4.setAttribute("onclick", "totext('"+t+"')");
        c.appendChild(e4);
    }

与此同时调用jquary修改数据库相关位置并在下次单击时先重新加载数据即可