使用JS或JQ实现单机单元格使其变为可编辑

通过class为每个单元格绑定单击事件，以及单机事件的具体实现

使用easyUI,或者是其他table等插件类型的前端，就可以了，支持可以编辑，这个可以百度下，我知道可以这样做

 <html>  
<head>  
<mce:script type="text/javascript"><!--  
    var inputItem;  
    var g_activeItem;  
    function changeToText(obj){  
         if( obj && inputItem ) {  
            var str = " ";  
            if(inputItem.value != "") {  
                str = inputItem.value;  
            }  
            obj.innerText = str;    
        }  
    }  

    function changeToEdit(obj){  
        if(event.srcElement.tagName.toLowerCase() == "td"){  
            inputItem=document.createElement("input");  
            inputItem.type="text";  
            inputItem.style.size="20";  
            inputItem.style.height="18px";  
            inputItem.style.fontSize="12px";  
        }  
        inputItem.value = obj.innerText;  
        obj.innerHTML = '';  
        obj.appendChild(inputItem);  
        inputItem.focus();  
        g_activeItem = obj;  
    }  

    document.attachEvent("ondblclick",function(){  
        if(event.srcElement.tagName.toLowerCase() == "td"){  
            changeToEdit(event.srcElement);  
        }  
    });  

    document.attachEvent("onclick",function(){  
        if( event.srcElement.parentNode == g_activeItem || event.srcElement == g_activeItem ) {  
            return;  
        } else {  
            changeToText(g_activeItem);  
        }  
    });  
// --></mce:script>  
</head>  
<body>  
    <table border="1">  
        <tr><td width="50">1</td><td width="50">1</td></tr>  
        <tr><td>2</td><td>2</td></tr>  
        <tr><td>3</td><td>3</td></tr>  
        <tr><td>4</td><td>4</td></tr>  
        <tr><td>5</td><td>5</td></tr>  
        <tr><td>6</td><td>6</td></tr>  
        <tr><td>7</td><td>7</td></tr>  
    </table>  
</body>  
</html>

js控制单元格的contenteditable="true"时，可编辑，contenteditable="false"时，不可编辑

可以用2个控件 [input type=text] 和[lable] lable设置显示，input设置隐藏给lable 添加个点击事件点击时显示input 隐藏lable ，给input添加个鼠标移开事件
隐藏input和显示lable