100分求实现一个复杂的Table界面，相信多数人都曾用过

<table border=1 width=200 onclick="mm()">
  <tr>
    <td>123</td>
    <td>456</td>
  </tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
function mm()
{
  var td = window.event.srcElement;
  if(td.tagName=="TD")
  {
    td.innerHTML = "<input style='width: 100%' value='"+ 
    td.innerHTML +"' onblur='this.parentNode.innerHTML=this.value'>";
    td.childNodes[0].focus();
  }
}
</SCRIPT>

解决方案 »

  1.   

    首先页面捕获onkeydown事件。
    1、如果要提交，每个单元格对应一个input，点击到时，显示它。当回车或失去焦点则赋值并隐藏input。
    如果有相同数据的单元格选项，则用层移动列表框到该位置
      

  2.   

    <style>
    td{width:200px;height:100px;background-color:red}
    #text{t:expression(this.onclick=function(){set('text',this)})}
    #sel{t:expression(this.onclick=function(){set('select',this)})}
    </style>
    <script>
    function set()
    {
      if(set.arguments[0]=='text')
       {
         var p=document.createElement("<input type=text>");
         p.onclick=function(){event.cancelBubble=true;};
         p.onblur=function(){this.parentNode.innerHTML=this.parentNode.innerText+this.value};
         set.arguments[1].appendChild(p);  
       }
        if(set.arguments[0]=='select')
       {
         var p=document.createElement("<select>");
         p.options[0]=new Option("1","1");p.options[1]=new Option("2","2");
         p.onclick=function(){event.cancelBubble=true;};
         p.onchange=function(){this.parentNode.innerHTML=this.value};
         set.arguments[1].appendChild(p);  
       }
    }
    </script>
    <body>
    <table><tr><td id="text"></td><td id="sel"></td></tr></table>
    </body>
      

  3.   

    完善一下梅老大的代码
    function mm()
    {
      var td = window.event.srcElement;
      if(td.tagName=="TD")
      {
        td.innerHTML = "<input style='width: 100%' value='"+ 
        td.innerHTML +"' onblur='this.parentNode.innerHTML=this.value' onkeypress='if(this.parentNode.nextSibling&&event.keyCode==13)this.parentNode.nextSibling.click();'>";
        td.childNodes[0].focus();
      }
    }
      

  4.   

    我将三人 meizz(梅花雪) vivianfdlpw()  scoutlin(梅川库子) 合在一起试试，看是否符合要求了。
      

  5.   

    vivianfdlpw() 代码有点小问题
      

  6.   

    我发现scoutlin(梅川库子) 同我的想法很接近。仍有两点。
    1、最后一个单元格回车后如何让文本框消失。
    2、能不能在回车后只将焦点向后移，再回车时再显示出文本框。
    3、我想设置一下，如第二个框只能录入数据应如何处理。
      

  7.   

    <style>
    input,td{font-size:9pt;}
    </style>
    <table border=1 width=200 onclick="mm()">
      <tr>
        <td>123</td>
        <td>456</td>
        <td>789</td>
      </tr>
    </table>
    <script>
    function mm()
    {
      var td = window.event.srcElement;
      if(td.tagName=="TD")
      {
        td.innerHTML = "<input style='width: 100%' value='"+td.innerHTML +"' onblur='this.parentNode.innerHTML=this.value' onkeypress='kpress(this);'>";
        td.childNodes[0].focus();
      }
    }
    function kpress(obj){
    if(event.keyCode==13){
    if(obj.readOnly){
    if(obj.parentNode.nextSibling)
    obj.parentNode.nextSibling.click();
    }
    else
    {
    obj.style.background="transparent";
    obj.style.border="0";
    obj.readOnly=true;
    }
    }
    else
    {
     
     //第二个单元格 限制只能数字
     if(obj.parentNode.cellIndex==1)
     {
    if(event.keyCode!=8&&event.keyCode!=46)
       if(event.keyCode<48&&event.keyCode>57)
    event.returnValue=false;

     }  
    }}
    </script>
      

  8.   

    2、能不能在回车后只将焦点向后移，再回车时再显示出文本框。
    这个问题是最重要的，如何实现，其它的我均差不多搞定了，还有scoutlin(梅川库子 8===0 写代码的男优也有理想) 上楼的代码是无法限度第二个单元格 限制只能数字