在WEB環(huán)境中,要實現(xiàn)類似于EXCEL中的數(shù)據(jù)批量錄入,并且能夠任意添加、刪除、甚至復(fù)制粘貼表格行里的數(shù)據(jù)，確實有些麻煩。麻煩是麻煩點，但不是很難，需要耐心。

一、搭建數(shù)據(jù)錄入環(huán)境

錄入環(huán)境，即用戶的主要工作區(qū)，其實就是一個表格的界面。我們先不考慮數(shù)據(jù)的批量修改，先是錄入。
工作區(qū)為一個表格，第一行為表頭，第二行就是每條數(shù)據(jù)，最后一行為合計匯總。

<table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#999999" id="itemList">
        <tr bgcolor="#FFFFFF">
          <td width="3%"> </td>
          <td width="2%" height="26"> <div align="center"><strong>序號</strong></div></td>
          <td width="6%"> <div align="center"><strong>定額<br>
              編號</strong></div></td>
          <td width="14%"> <div align="center"><strong>分部分項目名稱</strong></div></td>
          <td width="5%"> <div align="center"><strong>單位</strong></div></td>
          <td width="5%"> <div align="center"><strong>數(shù)量</strong></div></td>
          <td width="6%"> <div align="center"><strong>基價</strong></div></td>
          <td width="6%"> <div align="center"><strong>金額</strong></div></td>
          <td colspan="2"> <div align="center"></div>
            <div align="center">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td colspan="2"><div align="center"><strong>人工費</strong></div></td>
                </tr>
                <tr>
                  <td><div align="center"><strong>單價</strong></div></td>
                  <td><div align="center"><strong>金額</strong></div></td>
                </tr>
              </table>
            </div></td>
          <td colspan="2"> <div align="center"></div>
            <div align="center">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td colspan="2"><div align="center"><strong>材料費</strong></div></td>
                </tr>
                <tr>
                  <td><div align="center"><strong>單價</strong></div></td>
                  <td><div align="center"><strong>金額</strong></div></td>
                </tr>
              </table>
            </div></td>
          <td colspan="2"> <div align="center"></div>
            <div align="center">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td colspan="2"><div align="center"><strong>機(jī)械費</strong></div></td>
                </tr>
                <tr>
                  <td><div align="center"><strong>單價</strong></div></td>
                  <td><div align="center"><strong>金額</strong></div></td>
                </tr>
              </table>
            </div></td>
          <td colspan="2"> <div align="center"></div>
            <div align="center">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td colspan="2"><div align="center"><strong>材料用量</strong></div></td>
                </tr>
                <tr>
                  <td width="50%"> <div align="center"><strong>名稱</strong></div></td>
                  <td width="50%"><div align="center"><strong>定額含量</strong></div></td>
                </tr>
              </table>
            </div></td>
        </tr>
        <tr bgcolor="#FFFFFF" id="row1">
          <td> <input type="checkbox" name="cbRow" value="0"></td>
          <td height="22"> <div align="center" id="rowNum">1</div></td>
          <td> <div align="center">
              <input name="ration" type="text" size="6">
            </div></td>
          <td> <div align="center">
              <input name="pname" type="text" size="15">
            </div></td>
          <td> <div align="center">
              <input name="unit" type="text" size="5">
            </div></td>
          <td> <div align="center">
              <input name="amount" type="text" size="5">
            </div></td>
          <td> <div align="center">
              <input name="baseprice" type="text" size="6">
            </div></td>
          <td> <div align="center">
              <input name="fee1" type="text" size="6">
            </div></td>
          <td width="5%"> <div align="center">
              <input name="manprice" type="text" size="5">
            </div></td>
          <td width="5%"> <div align="center">
              <input name="manfee" type="text" size="5">
            </div></td>
          <td width="5%"> <div align="center">
              <input name="materialprice" type="text" size="5">
            </div></td>
          <td width="5%"> <div align="center">
              <input name="materialfee" type="text" size="5">
            </div></td>
          <td width="5%"> <div align="center">
              <input name="machineprice" type="text" size="5">
            </div></td>
          <td width="5%"> <div align="center">
              <input name="machinefee" type="text" size="5">
            </div></td>
          <td width="11%"> <div align="center">
              <input name="materialname" type="text" size="10">
            </div></td>
          <td width="12%"> <div align="center">
              <input name="rationrate" type="text" size="10">
            </div></td>
        </tr>
        </table>
        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
        <tr bgcolor="#FFFFFF">
          <td width="3%"><div align="center"></div></td>
          <td width="2%" height="22"> <div align="center"></div></td>
          <td width="6%"><div align="center"></div></td>
          <td width="14%"><div align="center">直接費</div></td>
          <td width="5%"><div align="center"></div></td>
          <td width="5%"><div align="center"></div></td>
          <td width="6%"><div align="center"></div></td>
          <td width="6%"> <div align="center">
              <input name="totalfee1" type="text" size="6">
            </div></td>
          <td style="width: 67px"><div align="center"></div></td>
          <td style="width: 59px"> <div align="center">
              <input name="totalmanfee" type="text" size="5">
            </div></td>
          <td style="width: 68px"><div align="center"></div></td>
          <td style="width: 72px"> <div align="center">
              <input name="materialtotalfee1" type="text" size="5">
            </div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
        </tr>
        <tr bgcolor="#FFFFFF">
          <td> </td>
          <td height="22"> <div align="center"></div></td>
          <td> </td>
          <td><div align="center">工程造價</div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td> <div align="center">
              <input name="fee" type="text" size="6">
            </div></td>
          <td style="width: 67px"><div align="center">工日</div></td>
          <td style="width: 59px"> <div align="center">
              <input name="workday" type="text" size="5">
            </div></td>
          <td style="width: 68px"><div align="center">材料費</div></td>
          <td style="width: 72px"> <div align="center">
              <input name="materialtotalfee" type="text" size="5">
            </div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
        </tr>
      </table></td>
  </tr>  
  <tr>
    <td height="24"> <div align="left">
        <input type="button" name="Submit2" value="復(fù)制選中項">
        <input type="button" name="Submit23" value="粘貼">
        <input type="reset" name="btnReset" value="復(fù)位">
        <input type="button" name="Submit222" value="增加一行" onclick="add_row()">
        <input type="button" name="btnDel" value="刪除選中行" onclick="del_row()" />
      </div></td>
  </tr>
  </table>

JS代碼：

<script>  
  //初始化時,自動添加6行
  window.onload = function(){
   for(var j=0;j<6;j++){
  add_row();
   }
  }
  //添加一行
  function add_row()  
  {
      var   con   =   row1.cloneNode(true);  
      var   newTR=con;  
      newTR.style.display='';     //加的  
      newTR.id="row" + document.getElementById('itemList').rows.length-1;
      row1.parentNode.insertAdjacentElement("beforeEnd",newTR);   
      newTR.cells[1].innerHTML = '<div align=center>' + (document.getElementById('itemList').rows.length-1) + '</div>';
  }
  //刪除一行
  function del_row()  
  {  
      if( !confirm("你確定要刪除嗎?") )
          return;
      if(itemList.rows.length==1)
      {  
          alert("沒有可以刪除的對象了!");  
          return;  
      }  
      var  checkit   =   false;
      var deleteRowIndex = new Array();
      for(var   i=0;i<document.all.cbRow.length;i++)   {  
         if(document.all.cbRow[i].checked)   {       
            checkit=true;  
            deleteRowIndex[i] = i;
         }  
     }
   var tmpIndex = 0;
   for( var x=0;x<deleteRowIndex.length;x++ ){
  //alert( deleteRowIndex[x] );
  if( deleteRowIndex[x] && deleteRowIndex[x] != "" ){
   itemList.deleteRow(deleteRowIndex[x]+1-tmpIndex) ;
   tmpIndex++;
  }
   }
   if(!checkit)    
   {  
    alert("請選擇一個要刪除的對象!");  
    return   false  
   }
   //重新設(shè)置行ID和序號
   for( var y=1;y<document.getElementById('itemList').rows.length;y++ ){
  document.getElementById('itemList').rows[y].id = 'row' + y;
  document.getElementById('itemList').rows[y].cells[1].innerHTML = '<div align=center>' + y + '</div>';
   }
  }
  //復(fù)制選中項
  function copy_rows(){

  }
  //粘貼
  function paster_rows(){

  }
  </script>