可编辑表格
（创建时间：2009年06月22日 20:12:00）
Jangogo ： 

如果在填表单时移到下一个项都需要鼠标去点的话，那也太折腾老百姓了，因此少让用户去点鼠标，可以敲下回车键盘键就能代替鼠标去点，那就算是省事又省心了。 
下面简单的说下如何做可编辑的表格。主要使用了 XML DOM-Element 对象来完成以下操作。可参考http://www.w3school.com.cn/xmldom/dom_element.asp

以下是主要的代码：
JavaScript:

 
  1. var TempValue = "";     //全局变量临时保存当前编辑单元格的值        
  2. var CurElement = null;  //当前节点           
  3.           
  4. //当前编辑单元格        
  5. var InputControl = '';           
  6.          
  7. //捕获当前Element并判断是否为TD标签        
  8. function editTD(){           
  9.    if(CurElement.tagName == "TD"){           
  10.       var srcE=event.srcElement;           
  11.       var mValue = srcE.innerHTML;           
  12.       srcE.innerHTML =InputControl;           
  13.       srcE.childNodes[0].value = mValue;           
  14.       srcE.childNodes[0].focus();           
  15.       srcE.childNodes[0].select();           
  16.    }           
  17. }           
  18.           
  19. //保存编辑的值，回车移动到下一个TD          
  20. function saveValue(pElement){           
  21.    if(event.keyCode == 13){             
  22.       TempValue = pElement.value;//记录 值           
  23.       var Parent = pElement.parentNode;           
  24.       var p=null;           
  25.       pElement.parentNode.innerHTML=TempValue;           
  26.       var TempValue = "";           
  27.       if(Parent.nextSibling != null){           
  28.           p=Parent.nextSibling;           
  29.           TempValue = p.innerHTML;           
  30.           p.innerHTML = InputControl;           
  31.           p.childNodes[0].value = TempValue;           
  32.           p.childNodes[0].focus();           
  33.           p.childNodes[0].select();           
  34.      }           
  35.      else if(Parent.parentNode.nextSibling != null){           
  36.           p=Parent.parentNode.nextSibling.childNodes;           
  37.           if(p != null){           
  38.               TempValue = p[0].innerHTML;           
  39.               p[0].innerHTML = InputControl;           
  40.               p[0].childNodes[0].value = TempValue;           
  41.               p[0].childNodes[0].focus();           
  42.               p[0].childNodes[0].select();           
  43.           }           
  44.      }           
  45.      else if(Parent.nextSibling == null && Parent.parentNode.nextSibling == null){           
  46.           TempValue = Parent.innerHTML;           
  47.           Parent.innerHTML = InputControl;           
  48.           Parent.childNodes[0].value = TempValue;           
  49.           Parent.childNodes[0].focus();           
  50.           Parent.childNodes[0].select();           
  51.      }           
  52.    }           
  53. }           
  54.          
  55. //当前编辑单元格失去焦点时触发，更新td的值        
  56. function mouseBlur(CurElement){           
  57.    TempValue = CurElement.value;           
  58.    CurElement.parentNode.innerHTML=TempValue;           
  59. }   

 HTML:

 
  1. //表格内容           
  2. <table cellpadding="0" cellspacing="0" border="1" width="200" height="90" style=" table-layout:fixed" id="MainTable" onclick="CurElement=event.srcElement;editTD()">          
  3. <tr>          
  4.   <td>aa< /td>          
  5.   <td>bb< /td>          
  6. < /tr>               
  7. <tr>          
  8.   <td>cc< /td>          
  9.   <td>dd< /td>          
  10. < /tr>          
  11. <tr>          
  12. <td>ee< /td>          
  13. <td>ff< /td>          
  14. < /tr>          
  15. < /table>  

 

  

 

2009年06月22日 20:12
回复(0)分类(1)转发(0)全文打开
文档中心