怎样实现点击一个单元格后对应的内容处于可编辑状态？

<html>
<head>
<title></title>
<meta http-equiv="http-content" content="text/html;charset=gb2312"/>
<script>
window.onload=function()
{
  var Tb= document.getElementById("Tb");
  Tb.ondblclick=Handler;
}
function Handler(e)
{
  e=e||event;
  var tag=e.srcElement||e.target;
  if(tag.tagName=="TABLE"||tag.tagName=="TR")
    return;
  if(tag.tagName!="TD")
    tag=tag.parentNode;
  tag.getElementsByTagName("span")[0].style.display="none"; 
  var inp=tag.getElementsByTagName("input")[0];  
  inp.onblur=function()
  {
    this.style.display="none";
    var sp=this.parentNode.getElementsByTagName("span")[0];
    sp.innerHTML=this.value;
    sp.style.display="";
  }
  inp.style.display="";
  inp.focus();
}
</script>
</head>
<body>
<table width='300px' border='1' cellpadding='0' cellspacing='2' id="Tb">
<tr><td width='33%'><span>行1列1</span><input type="text" value="行1列1"  style="display:none"/></td>
<td width='33%'><span>行1列2</span><input type="text" value="行1列2"  style="display:none"/></td>
<td width='34%'><span>行1列3</span><input type="text" value="行1列3"  style="display:none"/></td></tr>
<tr><td width='33%'><span>行2列1</span><input type="text" value="行2列1"  style="display:none"/></td>
<td width='33%'><span>行2列2</span><input type="text" value="行2列2"  style="display:none"/></td>
<td width='34%'><span>行2列3</span><input type="text" value="行2列3"  style="display:none"/></td></tr>
<tr><td width='33%'><span>行3列1</span><input type="text" value="行3列1"  style="display:none"/></td>
<td width='33%'><span>行3列2</span><input type="text" value="行3列2"  style="display:none"/></td>
<td width='34%'><span>行3列3</span><input type="text" value="行3列3" style="display:none" /></td></tr>
</table>
</body>
</html>

解决方案 »

  1.   

    为什么不用readonly和sytle border？
    两个数据出现……
      

  2.   

    给你一个收藏:
    http://space.flash8.net/bbs/viewthread.php?tid=51314
      

  3.   

    动态创建的话可以保证这个应用中只有一个文本框存在.
    况且，要更新数据库，单元格的数据已经在单元格中存放了，干嘛要把单元格的数据放在文本框中？
    下面的例子，贴出来请多批评。<html>
    <head>
    <script type="text/javascript">
    window.attachEvent("onload", function() {
    document.getElementById("myTable").onclick = myTable_onClick;
    });

    function myTable_onClick() {
    var el = event.srcElement;
    if (el.tagName == "TD")
    createInput(el);
    }

    function createInput(container) {
    var _input = document.createElement("<input type='text' style='width: 150px; height: 25px;'>");
    _input.value = container.innerHTML;

    _input.onblur = function() {
    container.innerHTML = _input.value;
    }

    container.innerHTML = "";
    container.appendChild(_input);
    _input.focus();
    }
    </script>
    </head>
    <body>
    <table id="myTable" border="1">
    <tr>
    <td width="150">11</td>
    <td width="150">12</td>
    </tr>
    <tr>
    <td>21</td>
    <td>22</td>
    </tr>
    </table>
    </body>
    </html>
      

  4.   

    一看你代码在ff下就运行不了服务器是取不到表格中的单元格的数据的.必须要是select,input 中的type为checkbox,text,radio,sumit等的才能取到值我看你是没学过动态技术吧??
      

  5.   

    想在Firefox下运行不就把event.srcElement改成event.target就行了吗？关键是思想，而不是在这些浏览器间差异的实现。楼上所说的服务器取数据的方式是指的用form的post吗？现在都Ajax了，还需要你再建一个form去post吗？直接用XMLHttpRequest不就完事了嘛！另外给你说一下啊，服务器是不会从客户端取数据的，数据是客户端给服务器发送的请求中包括的，想给服务器传什么数据，用XMLHttpRequest发送请求就可以了。不要告诉我你不知道怎么用啊？
      

  6.   

    不是没个人都用ajax来提交的.
      

  7.   

    ff不支持attachEvent你的事件对象传递也不正确
      

  8.   

    这个想法是好，我以前也做过一个给老师录成绩单的表格，单个录入、成行录入、成列录入都成，
    但是后来放弃了，主要是这个东西最大的毛病是如果输错了，没有撤消的除地，都直接AJAX提交到数据库了。
    当然如果不用AJAX提交，直接用表单submit提交也行，就是后台数据处理很麻烦，最后的处理办法是
    设置一个编辑模式，进入编辑模式则所有表格内容都变成input，提交仍然采用AJAX提交。
    放弃了原来那种单个录入的方法。