用prototype写的一个动态表格例子,包括AJAX实现增删改

本文由 KEEL {http://blog.k99k.com}原创,转载请注明出处.
说明:由服务器代码(如JSP)生成GROUPS,LXRS数组字符串,由JS生成表格内容.并可对表格进行编辑,修改.修改通过AJAX实现,修改结果(也可以说是效果)简单的以重新载入页面的方式实现.
这其中有个相对比较复杂的下拉框处理,改了很多次,现在应该是一个比较完善的解决办法.
代码实现后在IE、FIREFOX、OPERA下测试通过（也费了一些周折）.
结论：用了prototype很少几个特性（目前掌握得不多），就感觉代码少了很多，还是很方便的，呵呵。
注： 用prototype的版本为1.3.1，就是28K的那个。
又注：AJAX以服务器返回字符串true判断为处理成功，这个例子在无服务器环境下测试会alert一个错误，表示未成功连接服务器。
[code]
test
      
         
           通讯录管理
                       
      
           
                    添加组 | 添加联系人 | 修改组
                 
                 
           
         
                 
                   姓名
                   电话
                   群组
                   修改/删除
                                 
               
           
         
      
";
   $(con).innerHTML = show;
}
function backModi(con){
   var before = $("id_"+con).value;
   $(con).innerHTML = before;
}
//--------------------------------------------
//联系人,处理表格中的一行
var Lxr = Class.create();
//类结构
Lxr.prototype = {
   initialize: function(id, cName,phone,gName,gId,lId) {
     this.id = id;//序号,不是用户ID
     this.cName = cName;
     this.phone = phone;
     this.gName = gName;
     this.gId = gId;
     this.lId = lId;
    },
   //显示表格本行
    show: function() {
     var oRow=$('oTable').insertRow(-1);
     var cell_1=oRow.insertCell(-1);
     var cell_2=oRow.insertCell(-1);
     var cell_3=oRow.insertCell(-1);
     var cell_4=oRow.insertCell(-1);
     var cell_5=oRow.insertCell(-1);
     //定义ID
     oRow.id = "tr"+this.id;
     cell_1.id = "b"+this.id;
     cell_2.id = "c"+this.id;
     cell_3.id = "d"+this.id;
     cell_4.id = "e"+this.id;
     cell_5.id = "f"+this.id;
     cell_1.innerHTML=this.cName;
     cell_2.innerHTML=this.phone;
     cell_3.innerHTML=this.gName;
     cell_4.innerHTML="修改";
     cell_5.innerHTML="删除";
    },
    //显示修改本行
   modi: function() {
     if(GROUPS.length ";
     $("e"+this.id).innerHTML = show;
     modiNow = this.id;
   },
    //取消显示修改
   cancel: function() {
     backModi("b"+this.id);
     backModi("c"+this.id);
     $("d"+this.id).innerHTML = this.gName;
     $("e"+this.id).innerHTML = "修改";
     modiNow = -1;
   },
    //提交修改
   doModi: function() {
     if(confirm("确认要修改此联系人?")){
       var n = $("id_b"+this.id).value;
       var p = $("id_c"+this.id).value;
       var g = 1;
       var lg = $('l_group');
       var i = lg.selectedIndex;
       g = $('l_group').options.value;
       if(n.length";
   for(i=0;i"+GROUPS.gName+"";
       if(gName==GROUPS.gName){
         gId = GROUPS.gId;
       }
     }
   }
   gStr+="";
   if(gId == -1){
     return gStr;
   }else{
     var str = "option value='"+gId+"'";
     return gStr.replace(str,"option value='"+gId+"' selected");
   }
}
//----------------------------------
//管理组及添加联系人
var GLCtrl = Class.create();
//组
GLCtrl.prototype = {
   initialize: function() {
     this.cancelButton = " ";
   },
   //显示修改组
   showModiGp: function() {
     if(GROUPS.length " + this.cancelButton;
     $('result').innerHTML = show;
   },
   //提交修改组
   doModiGp: function() {
     if(confirm("确认要更新此组名?")){
       var mg = $("mg").value;
       if(mg.length  " + this.cancelButton;
     $('result').innerHTML = show;
   },
   //提交添加
   doAddGp: function() {
     var ag = $("a_addG").value;
     if(ag.length默认组";}
     var show = "姓名:  电话:  组: "+g+" " + this.cancelButton;
     $('result').innerHTML = show;
   },
   //提交添加
   doAddLxr: function() {
     var n = $('l_name').value;
     if(n.length=0){
     alert(showOK);
     window.top.location.reload();
   }else{
     alert(showErr);
     $('result').innerHTML = showErr;
   }
}
//-->