麻烦大家修改下实例中的BUG？
这是我从网上找的个实例：但是有很明显的BUG，就是当把某单元格的退格为空时，移开焦点，发现此刻除了文本框消失外，所在的单元格也同时消失了；我肯定希望此是该单元格不消失，如何修正这个BUG呢？请各位朋友指点？多谢！
<title> 编辑表格 </title>
<style type= "text/css ">
<!--
body { font-size:12px;}
input {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
background-color: #FFFFE1;
border: 1px solid #999;
height:auto;
}
.Table { border-width:1px 0px 0px 1px; border-style:solid; border-color:#999;}
.Table td { border-width:0px 1px 1px 0px; border-style:solid; border-color:#999;}
-->
</style>
</head>
<body>
<table width= "80% " border= "0 " cellpadding= "0 " cellspacing= "0 " onclick= "setEdit(event.srcElement) " class= "Table ">
<tr>
<td width= "17% "> a </td>
<td width= "19% "> bb </td>
<td width= "30% "> asdf </td>
<td width= "23% "> eee </td>
<td width= "11% "> adsf </td>
</tr>
<tr>
<td> 1 </td>
<td> 3 </td>
<td> 4 </td>
<td> 5 </td>
<td> 9 </td>
</tr>
<tr>
<td> as </td>
<td> asdfsdfa </td>
<td> sadfsdaf </td>
<td> sadfsdfa </td>
<td> sdafsadf </td>
</tr>
<tr>
<td> sadfsdfa </td>
<td> asdf </td>
<td> </td>
<td> asdfasdf </td>
<td> asdfasf </td>
</tr>
<tr>
<td> asdfsadf </td>
<td> asdfsadf </td>
<td> asdfasdfasd </td>
<td> ea </td>
<td> asdfasfd </td>
</tr>
</table>
</body>
</html>
<script type= "text/javascript ">
oldObj= " ";
var newNode=document.createElement( "input ");//创建text文本框表单对象
newNode.type= "text ";
function setEdit(click_td)//click_td是事件发生对象
{
var obj;
if(click_td.tagName== "TD ")//如果事件是发生在单元格上时；
{
if(oldObj!= " ")//如果旧的对象不为空时；
{
oldObj.removeChild(eval( "tmpText "));//在旧的对象中移除tmpText节点。
if(newNode.vlaue== " ") oldObj.innerText= " ";
else oldObj.innerText=newNode.value;
}
obj=click_td;
oldObj=obj;
newNode.width=obj.offsetWidth;
newNode.height=obj.offsetHeight;
newNode.id= "tmpText ";
newNode.value=obj.innerText;
obj.innerText= " ";
obj.appendChild(newNode);
newNode.focus();
}
}
</script>
</body>
[解决办法]
兼容IE6,FF2
<html>
<head>
<title> 编辑表格 </title>
<style type= "text/css ">
<!--
body { font-size:12px;}
input {
width:100%;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
background-color: #FFFFE1;
border: 1px solid #999;
}
.Table { border-width:1px 0px 0px 1px; border-style:solid; border-color:#999; border-collapse: collapse;}
.Table td { border-width:0px 1px 1px 0px; border-style:solid; border-color:#999;word-break:break-all;}
-->
</style>
<script type= "text/javascript ">
var oldObj=null;
var gTxt=document.createElement( "input ");//创建text文本框表单对象
gTxt.type= "text ";
function setEdit(evt){
var obj = evt.srcElement || evt.target;
if(!obj || obj.tagName.toUpperCase()!= "TD " || obj==oldObj)
return ;
if(oldObj)
{
var txtNode = document.createTextNode(gTxt.value);
gTxt.parentNode.appendChild(txtNode);
}
oldObj=obj;
gTxt.value = obj.childNodes[0].nodeValue;
for(var i=obj.childNodes.length-1;i> =0;i--)
obj.removeChild(obj.childNodes[i]);
obj.appendChild(gTxt);
gTxt.focus();
}
</script>
</head>
<body>
<table width= "80% " border= "0 " cellpadding= "0 " cellspacing= "0 " onclick= "setEdit(event) " class= "Table ">
<tr>
<td width= "17% "> a </td>
<td width= "19% "> bb </td>
<td width= "30% "> asdf </td>
<td width= "23% "> eee </td>
<td width= "11% "> adsf </td>
</tr>
<tr>
<td> 1 </td>
<td> 3 </td>
<td> 4 </td>
<td> 5 </td>
<td> 9 </td>
</tr>
<tr>
<td> as </td>
<td> asdfsdfa </td>
<td> sadfsdaf </td>
<td> sadfsdfa </td>
<td> sdafsadf </td>
</tr>
<tr>
<td> sadfsdfa </td>
<td> asdf </td>
<td> </td>
<td> asdfasdf </td>
<td> asdfasf </td>
</tr>
<tr>
<td> asdfsadf </td>
<td> asdfsadf </td>
<td> asdfasdfasd </td>
<td> ea </td>
<td> asdfasfd </td>
</tr>
</table>
</body>
</html>
