<html>
<head><title>动态添加数据，批量提交保存</title></head>
<script type="text/javascript">
  //增加数据
  function addData(){
  var tableObj=document.getElementById("addTab");
        var newRowObj=tableObj.insertRow(tableObj.rows.length);
        var loadModeName=newRowObj.insertCell(newRowObj.cells.length);
        var loadModePrice=newRowObj.insertCell(newRowObj.cells.length);
        var del=newRowObj.insertCell(newRowObj.cells.length);
        loadModeName.innerHTML='<input name="workTeamCode"  readonly maxlength="2"/>'
        loadModePrice.innerHTML='<input name="workTeamName" readonly="readonly" maxlength="5" οnblur="lostblur(this)"/>'
        del.innerHTML='<input type="button" align="center" name="update" value="修改" οnclick="updateRow()">'
  
  var arrObj=document.all.workTeamCode;
  //当数组的长度为0时候执行
     if("undefined"==typeof arrObj){
   addDataValue(1);
     }
     //当数组的长度为1的时候执行
     else if("undefined"==typeof arrObj.length){
   addDataValue(2);
     }else{
     addDataValue(3);
     }
  delAdd();
  }
     //把录入table的值放到文本框显示
     function addDataValue(obj){
        //当数组的长度为1时候执行
        if(obj<2)
        {
          var h=document.all.code;
          var s=document.getElementById("workTeamCode");
          s.value=h.value;  
          arrObj=document.all.name;
          woodadd=document.getElementById("workTeamName");
          woodadd.value=arrObj.value;  
         }else
         //当数组的长度大于2时候执行
         {
          var h=document.getElementById("code");
          var s=document.getElementsByName("workTeamCode");
          s[s.length-1].value=h.value;  
          arrObj=document.getElementById("name");
          woodadd=document.getElementsByName("workTeamName");
          woodadd[woodadd.length-1].value=arrObj.value;  
         }
     }
     //还原文本框内容
     function delAdd(){
      document.getElementById("code").value="";
      document.getElementById("name").value="";
     }
     //修改指定的行数据
     function updateData(obj){
  obj.readOnly=false;
  obj.focus();
     }
     //  修改指定的行
     function updateRow(){
    var    arrObj   =   document.all.update; 
    var  loadModeNamet =   document.getElementsByName("workTeamCode");
    var  loadModePricet= document.all.workTeamName;
    var   srcObj   =   event.srcElement;  
     //当数组的长度为1的时候执行
     if("undefined"==typeof arrObj.length){
    loadModePricet.readOnly=false;
    loadModePricet.style.backgroundColor="#00FFFF";
   }else{
    for(var i=0;   i<arrObj.length;   i++)  
    {  
    if(srcObj == arrObj[i])  
    {  
       loadModePricet[i].style.backgroundColor="#00FFFF";
       loadModePricet[i].readOnly=false;
       updateData(arrObj[i]);
     
     }  
    } 
     }
     }  
     //当文本框焦点丢失后触发的事件
  function lostblur(obj){
  if(obj.readOnly==false){
    var arrObj=obj;
    //此处可以调用Trim过滤掉空格 如：var str= Trim(arrObj.value);
    var str= arrObj.value;
    if(str==""){
     alert("此处不允许为空");
     obj.value="";
     arrObj.focus();
     return;
    }else {
   
     arrObj.readOnly=true;
     arrObj.style.backgroundColor="#FFFFFF";
    }
  }
 }
</script>
<body>
 <form name="form1"  action="#" method="post">
  <table  width="350" cellpadding="2" cellspacing="1" align="center">
   <tr>
    <td  align="center">
     代码：
    </td>
    <td  align="center" >
     <input type="text"  name="code" size="2" maxlength="2"  />
    </td>
    <td align="center">
     名称：
    </td>
    <td align="center">
     <input type="text" name="name" size="10"   maxlength="5" />
    </td>
    <td align="center">
     <input name="addButton" type="button" value="增  加">
    </td>
   </tr>
  </table>
  <hr/>
  <table border="1" id="addTab" width="350" cellpadding="2" cellspacing="1" align="center">
   <tr>
    <td align="center">
     代码
    </td>
    <td align="center">
     名称
    </td>
    <td align="center">
     操作
    </td>
   </tr>
  </table>
  <div align="center"><input name="addSubmit" type="button" value="保  存"></div>
 </form>
</body>
</html>