还是昨天的那个问题。。。。

单击td里面的内容，变成文本框，是可以了，但是如果变成文本框后，再点击文本框外面的td(挨着),恢复到以前的数据后，还是会马上变成文本框。大家帮忙测试下，看是什么问题。。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
//点击当前tr得到当前里面的数据
function clickAllInfo(trNum)
{
var tr=document.getElementById("tr"+trNum);
var vValue=new Array();
for(var j=0;j<tr.childNodes.length;j++)
{
//tr.childNodes[tdNum].innerHTML="<input type='text' value="+v+">";
vValue[j]=tr.childNodes[j].childNodes[0].nodeValue
}
return vValue;
}
//当文本框失去焦点时
function inputBlur(trNum,tdNum)
{
var t=document.getElementById("t");
clickAllInfo(trNum);
var tr=document.getElementById("tr"+trNum);
tr.childNodes[tdNum].innerHTML=t.value;
}
//当文本框获得焦点时
function inputFocus(trNum,tdNum)
{
var tr=document.getElementById("tr"+trNum);
//tr.childNodes[tdNum].innerHTML="<input type='text' value=33 onblur='inputBlur("+trNum+","+tdNum+")' id='t' onclick='inputFocus("+trNum+","+tdNum+")'>"
document.getElementById("t").focus();
}
function clickInfo(trNum,tdNum)
{
var tr=document.getElementById("tr"+trNum);
var v=tr.childNodes[tdNum].childNodes[0].nodeValue;
var vValue=clickAllInfo(trNum);
//alert("22")
for(var j=0;j<tr.childNodes.length;j++)
{
tr.childNodes[j].innerHTML=vValue[j];
}
tr.childNodes[tdNum].innerHTML="<input type='text' value="+v+" onblur='inputBlur("+trNum+","+tdNum+")' id='t' onclick='stopBubble()'>"
document.getElementById("t").focus();
}
//阻止事件冒泡
function stopBubble(e) {
    if ( e && e.stopPropagation ) e.stopPropagation();
    else window.event.cancelBubble = true;
}</script>
<body>
<table width="97%" border="1" align="center">
  <tr>
    <td height="25" colspan="5" align="center">AJAX管理</td>
  </tr>
  <tr>
    <td height="25" align="center">新闻ID</td>
    <td height="25" align="center">新闻标题</td>
    <td height="25" align="center">新闻作者</td>
    <td height="25" align="center">新闻来源</td>
    <td height="25" align="center">操作</td>
  </tr>
  <tr id="tr1">
    <td height="25" align="center" id="td0" onclick="clickInfo(1,0)">1</td>
    <td height="25" align="center" id="td1" onclick="clickInfo(1,1)">测试哦</td>
    <td height="25" align="center" id="td2" onclick="clickInfo(1,2)">匿名</td>
    <td height="25" align="center" id="td3" onclick="clickInfo(1,3)">恩施晚报</td>
    <td height="25" align="center">&nbsp;</td>
  </tr>
  <tr id="tr2">
    <td height="25" align="center" id="td0">2</td>
    <td height="25" align="center" id="td1">下雨</td>
    <td height="25" align="center" id="td2">admin</td>
    <td height="25" align="center" id="td3">百度</td>
    <td height="25" align="center">&nbsp;</td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    clickInfo()函数中加个判断吧——如果当前单元格下不存在文本框才创建文本框。
      

  2.   

    确实不行，如果文本框失去焦点时就移除了，不知道该怎么解决了。
    实在不行的话，就改成双击单元格编辑。
      <td height="25" align="center" id="td0" ondblclick="clickInfo(1,0)">1</td>
      <td height="25" align="center" id="td1" ondblclick="clickInfo(1,1)">测试哦</td>
      <td height="25" align="center" id="td2" ondblclick="clickInfo(1,2)">匿名</td>
      <td height="25" align="center" id="td3" ondblclick="clickInfo(1,3)">恩施晚报</td>
      <td height="25" align="center">&nbsp;</td>
      

  3.   

    恩 我是在ecshop里面看的到这个功能 我就试着做了一下，有了一点思路，但是做起来还真麻烦啊，写完之后，看了一下ecshop,貌似它是用js里面的对象写的，哎，还是希望解决的
      

  4.   

    试试这个！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <script language="javascript">
    var pre;
    function clickInfo(th){
    if(pre==null){
    pre=th;
    th.isText=true;
    th.innerHTML="<input type='text' value="+th.innerHTML+" id='t' onclick='stopBubble()'>";
    }else if(pre!=th){
    if(document.getElementById("t")!=null){
    pre.innerHTML=document.getElementById("t").value;
    pre.isText=false;
    }
    th.isText=!th.isText;
    th.innerHTML="<input type='text' value="+th.innerHTML+" id='t' onclick='stopBubble()'>";
    pre=th;
    }else{
    if(th.isText==undefined||!th.isText){
    th.isText=true;
    //alert(th.innerHTML);
    th.innerHTML="<input type='text' value="+th.innerHTML+" id='t' onclick='stopBubble()'>";
    }else{
    th.innerHTML=document.getElementById("t").value;
    th.isText=!th.isText;
    }
    }
    pre=th;
    }function stopBubble(e) {
      if ( e && e.stopPropagation ) e.stopPropagation();
      else window.event.cancelBubble = true;
    }
    </script>
    <body>
    <table width="97%" border="1" align="center">
      <tr>
      <td height="25" colspan="5" align="center">AJAX管理</td>
      </tr>
      <tr>
      <td height="25" align="center">新闻ID</td>
      <td height="25" align="center">新闻标题</td>
      <td height="25" align="center">新闻作者</td>
      <td height="25" align="center">新闻来源</td>
      <td height="25" align="center">操作</td>
      </tr>
      <tr id="tr1">
      <td height="25" align="center" id="td0" onclick="clickInfo(this)">1</td>
      <td height="25" align="center" id="td1" onclick="clickInfo(this)">测试哦</td>
      <td height="25" align="center" id="td2" onclick="clickInfo(this)">匿名</td>
      <td height="25" align="center" id="td3" onclick="clickInfo(this)">恩施晚报</td>
      <td height="25" align="center">&nbsp;</td>
      </tr>
      <tr id="tr2">
      <td height="25" align="center" id="td0">2</td>
      <td height="25" align="center" id="td1">下雨</td>
      <td height="25" align="center" id="td2">admin</td>
      <td height="25" align="center" id="td3">百度</td>
      <td height="25" align="center">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
      

  5.   

    兼容性很差，谷歌浏览器没作用不过我在IE 6.0下还算正常你是不是点了一下后，第二下还是点的那个单元格？点其它单元格就对了嘛input的onblur隐藏了文本框，再点同个单元格的onclick当然就是重新展开
      

  6.   

    这个那是因为你原来写的代码中也没给下一行的单元格绑定onclick事件啊。。
      

  7.   

    少了对文本框失去焦点事件的处理，不过有7楼这位大哥的代码，再写个onblur处理的函数就不难了，你可以自己尝试一下。今天头大了，睡觉～
      

  8.   

    这么写为什么会报错啊？
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <script language="javascript">
    function inputBlur()
    { document.getElementById("t").parentNode.innerHTML=document.getElementById("t").value;
    //alert(document.getElementById("t").value);
    //alert(document.getElementById("t").parentNode.id)
    }
    var pre;
    function clickInfo(th){
        if(pre==null){
            pre=th;
            th.isText=true;
            th.innerHTML="<input type='text' value="+th.innerHTML+" id='t' onclick='stopBubble()' onBlur='inputBlur()'>";
    document.getElementById("t").focus();
        }else if(pre!=th){
            if(document.getElementById("t")!=null){
                pre.innerHTML=document.getElementById("t").value;
                pre.isText=false;
            }
            th.isText=!th.isText;
            th.innerHTML="<input type='text' value="+th.innerHTML+" id='t' onclick='stopBubble()'  onBlur='inputBlur()'>";
    document.getElementById("t").focus();
            pre=th;
        }else{
            if(th.isText==undefined||!th.isText){
                th.isText=true;
                //alert(th.innerHTML);
                th.innerHTML="<input type='text' value="+th.innerHTML+" id='t' onclick='stopBubble()'  onBlur='inputBlur()'>";
    document.getElementById("t").focus();
            }else{
                th.innerHTML=document.getElementById("t").value;
                th.isText=!th.isText;
            }
        }
        pre=th;
    }function stopBubble(e) {
      if ( e && e.stopPropagation ) e.stopPropagation();
      else window.event.cancelBubble = true;
    }
    </script>
    <body>
    <table width="97%" border="1" align="center">
      <tr>
      <td height="25" colspan="5" align="center">AJAX管理</td>
      </tr>
      <tr>
      <td height="25" align="center">新闻ID</td>
      <td height="25" align="center">新闻标题</td>
      <td height="25" align="center">新闻作者</td>
      <td height="25" align="center">新闻来源</td>
      <td height="25" align="center">操作</td>
      </tr>
      <tr id="tr1">
      <td height="25" align="center" id="td0" onclick="clickInfo(this)">1</td>
      <td height="25" align="center" id="td1" onclick="clickInfo(this)">测试哦</td>
      <td height="25" align="center" id="td2" onclick="clickInfo(this)">匿名</td>
      <td height="25" align="center" id="td3" onclick="clickInfo(this)">恩施晚报</td>
      <td height="25" align="center">&nbsp;</td>
      </tr>
      <tr id="tr2">
      <td height="25" align="center" id="td0">2</td>
      <td height="25" align="center" id="td1">下雨</td>
      <td height="25" align="center" id="td2">admin</td>
      <td height="25" align="center" id="td3">百度</td>
      <td height="25" align="center">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
      

  9.   

    再试试这个，就是复杂了些，太晚了，明天看看有没有更好的方法<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <script language="javascript">
    var pre,tem=false;
    function clickInfo(th){
        if(pre==null){
            pre=th;
            th.isText=true;
            th.innerHTML="<input type='text' value="+th.innerHTML+" onblur='bl(this)' id='t' onclick='stopBubble()'>";
    document.getElementById("t").focus();
        }else if(pre!=th){
            if(document.getElementById("t")!=null){
                pre.innerHTML=document.getElementById("t").value;
                pre.isText=false;
            }
            th.isText=!th.isText;
            th.innerHTML="<input type='text' value="+th.innerHTML+" onblur='bl(this)' id='t' onclick='stopBubble()'>";
    document.getElementById("t").focus();
            pre=th;
        }else{
            if(th.isText==undefined||!th.isText){
                th.isText=true;
                th.innerHTML="<input type='text' value="+th.innerHTML+" onblur='bl(this)' id='t' onclick='stopBubble()'>";
    document.getElementById("t").focus();
            }else{
                th.innerHTML=document.getElementById("t").value;
                th.isText=!th.isText;
            }
        }
        pre=th;
    }
    function mouover(){
    tem=true;
    }
    function mouout(){
    tem=false;
    }
    function bl(){
    if(!tem){
    pre.isText=false;
    pre.innerHTML=document.getElementById("t").value;
    }
    }function stopBubble(e) {
      if ( e && e.stopPropagation ) e.stopPropagation();
      else window.event.cancelBubble = true;
    }
    </script>
    <body>
    <table width="97%" border="1" align="center">
      <tr>
      <td height="25" colspan="5" align="center">AJAX管理</td>
      </tr>
      <tr>
      <td height="25" align="center">新闻ID</td>
      <td height="25" align="center">新闻标题</td>
      <td height="25" align="center">新闻作者</td>
      <td height="25" align="center">新闻来源</td>
      <td height="25" align="center">操作</td>
      </tr>
      <tr id="tr1">
      <td height="25" align="center" id="td0" onclick="clickInfo(this)" onmouseover="mouover()" onmouseout="mouout()">1</td>
      <td height="25" align="center" id="td1" onclick="clickInfo(this)" onmouseover="mouover()" onmouseout="mouout()">测试哦</td>
      <td height="25" align="center" id="td2" onclick="clickInfo(this)" onmouseover="mouover()" onmouseout="mouout()">匿名</td>
      <td height="25" align="center" id="td3" onclick="clickInfo(this)" onmouseover="mouover()" onmouseout="mouout()">恩施晚报</td>
      <td height="25" align="center">&nbsp;</td>
      </tr>
      <tr id="tr2">
      <td height="25" align="center" id="td0">2</td>
      <td height="25" align="center" id="td1">下雨</td>
      <td height="25" align="center" id="td2">admin</td>
      <td height="25" align="center" id="td3">百度</td>
      <td height="25" align="center">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
      

  10.   

    wishifef:我觉得这么写没有错啊？？？
    function inputBlur()
    {document.getElementById("t").parentNode.innerHTML=document.getElementById("t").value;
    //alert(document.getElementById("t").value);
    //alert(document.getElementById("t").parentNode.id)
    }
      

  11.   

    <script type="text/javascript">
    var pre;
    function clickInfo(th) {
    if (pre == null || pre != th) {
    pre = th;
    th.isText = true;
    th.innerHTML = "<input type='text' value=" + th.innerHTML + " id='t' onclick='stopBubble()' onblur='inputBlur()'>";
    document.getElementById('t').focus();
    }
    }
    function inputBlur() {
    document.getElementById('t').parentNode.innerHTML = document.getElementById('t').value;
    }
    </script>
      

  12.   

    另外有一点请楼主注意，根据xhtml的语法规范，属性名必须用小写，因此，onBlur()应该写作onblur()。
    你在16楼的代码运行报错是因为没有维护好pre.isText属性：
    function inputBlur() {
    pre.isText = false;  //加上这一句就可以运行，但是没有解决再次点击同一个单元格的问题
    document.getElementById("t").parentNode.innerHTML=document.getElementById("t").value;
    }