在WEB环境中,要实现类似于EXCEL中的数据批量录入,并且能够任意添加、删除、甚至复制粘贴表格行里的数据，确实有些麻烦。麻烦是麻烦点，但不是很难，需要耐心。
一、搭建数据录入环境
录入环境，即用户的主要工作区，其实就是一个表格的界面。我们先不考虑数据的批量修改，先是录入。
工作区为一个表格，第一行为表头，第二行就是每条数据，最后一行为合计汇总。
<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>数量</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>机械费</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="复制选中项">
<input type="button" name="Submit23" value="粘贴">
<input type="reset" name="btnReset" value="复位">
<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
}
//重新设置行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>';
}
}
//复制选中项
function copy_rows(){
}
//粘贴
function paster_rows(){
}
</script>
