可编辑单元格版本二

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8"/>
 </head>

 <body onload="initCells()">
  <table border="1px">
    <tbody id="mytable">
        <tr>
            <td width="100px">欧也妮葛朗台</td>
            <td width="400px">
    《欧也妮·葛朗台》是法国批判现实主义小说家巴尔扎克《人间喜剧》中的“最出色的画幅之一”。小说叙述了一个金钱毁灭人性和造成家庭悲剧的故事，围绕欧也妮的爱情悲剧这一中心事件，以葛朗台家庭内专制所掀起的阵阵波澜、家庭外银行家和公证人两户之间的明争暗斗和欧也妮对夏尔·葛朗台倾心相爱而查理背信弃义的痛苦的人世遭遇三条相互交织的情节线索连串小说。
    《欧也妮·葛朗台》是一幅法国19世纪前半期外省的色彩缤纷的社会风俗画。
    </td>
        </tr>
        <tr>
            <td>是真的吗</td>
            <td >是真的吗是*二台的一档栏目</td>
        </tr>
        <tr>
            <td >战争与和平</td>
            <td >《战争与和平》是俄国作家托尔斯泰的代表作品。</td>
        </tr>
    </table>
  </table>
 </body>
</html>
<script type="text/javascript">
<!--

var editableCell={
    attach:function(td){
        var tag=td.firstChild.tagName;

        if(typeof(tag)!="undifined" && (tag=="INPUT" || tag=="TEXTAREA")){
            return;
        }

        if(td.offsetHeight<=22){
            // 文本框方案

            // 创建文本框
            var txt=document.createElement("input");
            txt.type="text";
            txt.value=td.innerHTML;
            txt.style.background="#ff9";
            txt.style.width=td.offsetWidth+"px";
            
            // 清空单元格并添加文本框
            td.innerHTML="";
            td.appendChild(txt);

            txt.focus();
            // 焦点移出文本框时新旧节点替换将文本框的值传给单元格
            txt.onblur=function(e){
                td.replaceChild(document.createTextNode(txt.value),txt);
                return false;
            }

            return false;
        }else{
            // 文本域方案

            // 创建文本域
            var area=document.createElement("textarea");
            area.style.width=td.offsetWidth+"px";
            area.style.height=td.offsetHeight+"px";
            area.style.background="#ff9";
            area.value=td.innerHTML;

            // 清空内部文字并代之以文本域
            td.innerHTML="";
            td.appendChild(area);

            area.focus();

            // 焦点移出文本域时新旧节点替换将文本域的值传给单元格
            area.onblur=function(e){
                td.replaceChild(document.createTextNode(area.value),area);

                return false;
            }

            return false;
        }

    }
}

function initCells(){
    var table=document.getElementById("mytable");
    
    for(var i=0;i<table.rows.length;i++){
            var tr=table.rows[i];
            var tds=tr.getElementsByTagName("td");

            for(var j=0;j<tds.length;j++){
                var td=tds[j];

                (function(td){// 闭包
                    td.onclick=function(){editableCell.attach(td)};
                })(td);
            }
    }
}
//-->
</script>
把上面代码存成html文件用浏览器打开就能看到效果了。
2017年1月14日17:39:28
可编辑单元格版本二

相关推荐
