可编辑表格

如果在填表单时移到下一个项都需要鼠标去点的话，那也太折腾老百姓了，因此少让用户去点鼠标，可以敲下回车键盘键就能代替鼠标去点，那就算是省事又省心了 。

    下面简单的说下如何做可编辑的表格。主要使用了 XML DOM- Element 对象来完成以下操作。可参考 http://www.w3school.com.cn/xmldom/dom_element.asp

以下是主要的代码：

var TempValue = "";     //全局变量临时保存当前编辑单元格的值
var CurElement = null;  //当前节点

//当前编辑单元格
var InputControl = '<input border="0" style="width:100;height:20; overflow:hidden;" type="text" onblur="mouseBlur(event.srcElement)" onkeydown="saveValue(event.srcElement)"/>';

//捕获当前Element并判断是否为TD标签
function editTD(){
   if(CurElement.tagName == "TD"){
      var srcE=event.srcElement;
      var mValue = srcE.innerHTML;
      srcE.innerHTML =InputControl;
      srcE.childNodes[0].value = mValue;
      srcE.childNodes[0].focus();
      srcE.childNodes[0].select();
   }
}

//保存编辑的值，回车移动到下一个TD
function saveValue(pElement){
   if(event.keyCode == 13){
      TempValue = pElement.value;//记录<td>值
      var Parent = pElement.parentNode;
      var p=null;
      pElement.parentNode.innerHTML=TempValue;
      var TempValue = "";
      if(Parent.nextSibling != null){
          p=Parent.nextSibling;
          TempValue = p.innerHTML;
          p.innerHTML = InputControl;
          p.childNodes[0].value = TempValue;
          p.childNodes[0].focus();
          p.childNodes[0].select();
     }
     else if(Parent.parentNode.nextSibling != null){
          p=Parent.parentNode.nextSibling.childNodes;
          if(p != null){
              TempValue = p[0].innerHTML;
              p[0].innerHTML = InputControl;
              p[0].childNodes[0].value = TempValue;
              p[0].childNodes[0].focus();
              p[0].childNodes[0].select();
          }
     }
     else if(Parent.nextSibling == null && Parent.parentNode.nextSibling == null){
          TempValue = Parent.innerHTML;
          Parent.innerHTML = InputControl;
          Parent.childNodes[0].value = TempValue;
          Parent.childNodes[0].focus();
          Parent.childNodes[0].select();
     }
   }
}

//当前编辑单元格失去焦点时触发，更新td的值
function mouseBlur(CurElement){
   TempValue = CurElement.value;
   CurElement.parentNode.innerHTML=TempValue;
}

//表格内容
<table cellpadding="0" cellspacing="0" border="1" width="200" height="90" style=" table-layout:fixed" id="MainTable" onclick="CurElement=event.srcElement;editTD()">
<tr>
  <td>aa</td>
  <td>bb</td>
</tr>   
<tr>
  <td>cc</td>
  <td>dd</td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
</tr>
</table>