不注释，不解释

 

  1. <html> 
  2. <head> 
  3. <script src="mootools.js" ></script> 
  4. <script> 
  5.     var Editor=new Class({ 
  6.         initialize: function(){ 
  7.             this.elements = {}; 
  8.             this.error=[]; 
  9.             this.events=new Events(); 
  10.         }, 
  11.         getError:function (){ 
  12.             var error=this.error; 
  13.             this.error=[]; 
  14.             return JSON.encode(error); 
  15.         } 
  16.         , 
  17.         //编辑对象，开始; 需要属性 group=44 name="password" [type="password"] 
  18.         toEdit:function (obj){ 
  19.             var att=obj.attributes; 
  20.             var name=att['name'].value; 
  21.             var type=att['type']?att['type'].value:'text'; 
  22.             if(!att['group']){ 
  23.                 this.error.push('unknow group'); 
  24.                 return; 
  25.             } 
  26.             var group = att['group'].value; 
  27.             this.elements[group]=this.elements[group]||{}; 
  28.             var ele=this.elements[group]; 
  29.              
  30.             if(!ele[name]) 
  31.             { 
  32.                 value=obj.innerHTML; 
  33.                 obj.innerHTML="<input type='"+type+"' style='width:"+(obj.offsetWidth+10)+"px;' name="+name+"  />"; 
  34.                 $(obj).getElement('input').value=value; 
  35.                 ele[name]={object:obj}; 
  36.                 this.events.fireEvent("toEdit",{type:'toEdit',group:group,object:obj,name:name}); 
  37.             } 
  38.         }, 
  39.         getValue:function(group,name){ 
  40.             var element=this.elements[group]; 
  41.             if(element[name]){                   
  42.                 var object=element[name].object; 
  43.                 var input=$(object).getElement('input'); 
  44.                 var value=input.value; 
  45.                 return value; 
  46.             } 
  47.             return null; 
  48.         }, 
  49.         foreach:function(group,fun){ 
  50.             var element=this.elements[group]; 
  51.             for(var name in element){ 
  52.                 if(element[name]){ 
  53.                     fun({group:group,name:name,element:element,object:element[name].object,value:this.getValue(group,name)}); 
  54.                 } 
  55.             } 
  56.         } 
  57.         , 
  58.         //编辑结束，获得所有修改，返回json，key为name属性 
  59.         endEdit:function (obj,group,ext_data){ 
  60.             var content={}; 
  61.             for(var e in ext_data){ 
  62.                 content[e]=ext_data[e]; 
  63.             } 
  64.             this.foreach(group,function(data){ 
  65.                 var object=data.object; 
  66.                 var check=object.attributes["check"]; 
  67.                 if(check){ 
  68.                     alert(eval（check.value)); 
  69.                     if(!(eval（check.value)(data.value))) 
  70.                         return false; 
  71.                 } 
  72.             }); 
  73.             this.foreach(group,function(data){ 
  74.                 var object=data.object; 
  75.                 content[data.name]=data.value.replace(/'/g,"\\'"); 
  76.                 object.innerHTML=data.value; 
  77.                 data.element[data.name]=null; 
  78.             }); 
  79.             this.events.fireEvent("endEdit",{type:'endEdit',object:obj,group:group}); 
  80.             return JSON.encode(content); 
  81.         } 
  82.     }); 
  83.     var editor=new Editor(); 
  84.     editor.events.addEvent("toEdit",editStart); 
  85.     editor.events.addEvent("endEdit",editEnd); 
  86.     function check_num(value){ 
  87.         return value.length<10; 
  88.     } 
  89.     function editStart(data){ 
  90.         //alert(data.group); 
  91.         $("button"+data.group).style.display=""; 
  92.     } 
  93.     function editEnd(data){ 
  94.         //alert(data.group); 
  95.         $("button"+data.group).style.display="none"; 
  96.     } 
  97.      
  98.      
  99.     function preview() 
  100.     {  
  101.         bdhtml=window.document.body.innerHTML;  
  102.         sprnstr="<!--startprint-->";  
  103.         eprnstr="<!--endprint-->";  
  104.         prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);  
  105.         prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));  
  106.         window.document.body.innerHTML=prnhtml;  
  107.         window.print();  
  108.     }  
  109.      
  110. </script> 
  111. </head> 
  112. <body> 
  113. <table border='1'> 
  114. <tr> 
  115.     <td onclick="editor.toEdit(this);" group=44 check="check_num" name="name">aaa</td> 
  116.     <td onclick="editor.toEdit(this);" group=44 name="password" type="password">123</td> 
  117.     <td onclick="editor.toEdit(this);" group=44 name="id">1222</td> 
  118.     <td><span onclick="editor.endEdit(this);" group=44 name="span">s</span></td> 
  119.     <td><input id="group44" type='button' onclick="$('message').innerHTML=editor.endEdit(44,{group_id:44}); $('error').innerHTML=editor.getError();" value="ok"/></td> 
  120.     <td id='message'></td> 
  121.     <td id='error'></td> 
  122. </tr> 
  123. <!--startprint--> 
  124. <tr> 
  125.     <td onclick="editor.toEdit(this);" group=55 check="check_num" name="name">aaa</td> 
  126.     <td onclick="editor.toEdit(this);" group=55 name="password" type="password">123</td> 
  127.     <td onclick="editor.toEdit(this);" group=55 name="id">1222</td> 
  128.     <td onclick="editor.toEdit(this);" name="id">1222</td> 
  129.     <td><span onclick="editor.toEdit(this);" group=55 name="span">s</span></td> 
  130.     <td><input id="button55" type='button' style="display:none" onclick="$('message').innerHTML=editor.endEdit(this,55,{group_id:55}); $('error').innerHTML=editor.getError();" value="ok"/></td> 
  131.     <td id='message'></td> 
  132.     <td id='error'></td> 
  133. </tr> 
  134. <!--endprint--> 
  135. <tr> 
  136.     <td><input type="button" onclick="preview()" /> 
  137.     </td> 
  138. </tr> 
  139. </table> 
  140. </body> 
  141. </html>