javascript问题，请大家帮帮忙，搞了半天了

我想做一个点击td里面的信息，变成可编辑的内容，现在基本上都实现了，但是有一个问题，就是当td里面变成可编辑状态时，我再点击文本框，为什么值变成null,请大家解决。代码如下:
<!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'>"
document.getElementById("t").focus();
}
</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.   

    搜索：javascript 事件冒泡
    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;
    }
      

  2.   

    //阻止事件冒泡
    function stopBubble(e) {
        if ( e && e.stopPropagation ) e.stopPropagation();
        else window.event.cancelBubble = true;
    } 这个加在什么地方啊？
      

  3.   

    ...onblur='inputBlur("+trNum+","+tdNum+")' id='t' onclick='stopBubble()'>";
      

  4.   

    自己google搜索一下：javascript 事件冒泡