js模拟datagrid

最近发现越来越懒,做后台管理对数据进行修改的时候老是做新页面,然后显示要修改的数据,用户修改,提交,太麻烦了,主要还要做一张新页面,关键还要美工,内容那么少,就那几个字段,多做一张页面真是浪费,因为是用java开发,不可能有datagrid控件的,所以这里就想模拟一个,代码比较简单.不要见笑阿!

< html >
   < head >< title > Simple jsp page </ title >
   < style >
    .input     ... {border:1 solid #000;width:80px;}
    span     ... {cursor:hand;COLOR:BLUE;}
   </ style >
   </ head >
   < body >
     < div style = " width:800;margin-left:expression((document.body.clientWidth-this.clientWidth)/2); " >
         < form name = " form1 "  method = " post " >
    
         < ul class = " deplist " > 教科院
             < li >
                 < TABLE width = 800  cellspacing = 0  cellpadding  =   1  border = 1  borderColor = " #E6E6E6 " >
                     < TR class = bgcolor align = center >
                         < TD width = 80   > 选择 </ TD >
                        
                         < td > 姓名 </ td >
                         < TD > 院系名称 </ TD >
                         < TD > 专业名称 </ TD >
                         < td > 验证码 </ td >
                         < TD > 操作 </ TD >
                     </ TR >

                     < TR align = center >
                         < TD width = 80  align = center >< input type = checkbox name = " dep "  value = 19 ></ TD >
                        
                         < TD > 张三 </ TD >
                         < TD > 教科院 </ TD >
                         < TD > 教育技术学 </ TD >
                         < TD > 123343.0 </ TD >
                         < TD >< span onclick = " edit(this) " > 编辑 </ span ></ TD >
                     </ TR >

                     < TR align = center >
                         < TD width = 80  align = center >< input type = checkbox name = " dep "  value = 19 ></ TD >
                        
                         < TD > 张三 </ TD >
                         < TD > 教科院 </ TD >
                         < TD > 教育技术学 </ TD >
                         < TD > 123343.0 </ TD >
                         < TD >< span onclick = " edit(this) " > 编辑 </ span ></ TD >
                     </ TR >
                  </ TABLE >
             </ li >
         </ ul >
         </ form >

         < SCRIPT LANGUAGE = " JavaScript " >
         <!--
             var  arr  =   new  Array();
             function  edit(obj) ... {
                var ele = obj.parentElement.parentElement;
                var len = ele.cells.length;
                var val = "";
                for(i = 1;i<len-1;i++)...{
                    val = ele.cells[i].innerText
                    ele.cells[i].innerHTML = "<input class='input' type=text name='t"+i+"' value="+val+">";    
                    arr[i-1] = val;
                }
                obj.parentElement.innerHTML = "<span οnclick='mod(this)'>修改</span> <span οnclick='cancel(this)'>取消</span>";
            }

             function  mod(obj) ... {
                var ele = obj.parentElement.parentElement;
                var len = ele.cells.length;
                for(i = 1;i<len-1;i++)...{
                    ele.cells[i].innerText = ele.cells[i].children[0].value;    
                }
                obj.parentElement.innerHTML = "<span οnclick='edit(this)'>编辑</span>";
            }

             function  cancel(obj) ... {
                var ele = obj.parentElement.parentElement;
                var len = ele.cells.length;
                for(i = 1;i<len-1;i++)...{
                    ele.cells[i].innerText = arr[i-1];    
                }
                obj.parentElement.innerHTML = "<span οnclick='edit(this)'>编辑</span>";        
            }
         // -->
         </ SCRIPT >
     </ div >
   </ body >
</ html >