任意行数的数据输入表格

来源：互联网发布：excel软件下载2017 编辑：程序博客网时间：2024/06/05 14:24
初始界面：
点击添加就等添加一行输入框！
添加几行后的界面：
页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>     <title>My JSP 'insnewequipment.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script><style type="text/css">table{table-layout:fixed;    empty-cells:show;     border-collapse: collapse;    margin:0 auto;    background-color:#e8f3fd;} td{text-align:center;border:1px solid #cad9ea;}a:link { text-decoration: none; color: blue; line-hight:18px;} </style><script language="javascript" type="text/javascript" src="js/jquery.js"></script><script language="javascript" type="text/javascript">function findObj(theObj, theDoc){ var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length){theDoc = parent.frames[theObj.substring(p+1)].document;    theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++){     foundObj = theDoc.forms[i][theObj]; }for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++){     foundObj = findObj(theObj,theDoc.layers[i].document); }if(!foundObj && document.getElementById){ foundObj = document.getElementById(theObj);    return foundObj;}}//添加一个参与人填写行function AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中 var txtTRLastIndex = findObj("txtTRLastIndex",document);var rowID = parseInt(txtTRLastIndex.value);if(rowID>12){alert("每次最多添加12个，请保存后继续添加！");}else{var signFrame = findObj("SignFrame",document);//添加行var newTR = signFrame.insertRow(signFrame.rows.length);newTR.id = "SignItem" + rowID;//添加列:设备编号var newEquipmentIdTD=newTR.insertCell(0);//添加列内容newEquipmentIdTD.innerHTML = "<input name='equipmentId" + rowID + "' id='equipmentId" + rowID + "' type='text' size='10' />";//添加列:设备种类var newEquipmentCategoryIdTD=newTR.insertCell(1);//添加列内容newEquipmentCategoryIdTD.innerHTML = "<select name='equipmentCategoryId" + rowID + "' id='equipmentCategoryId" + rowID + "' style='width:92px;'><option value='0'>请选择</option><option value='1'>POS机</option><option value='2'>PSAM卡</option><option value='3'>ISAM卡</option><option value='4'>采集器</option></select>";//添加列:出厂编号var newProductionIdTD=newTR.insertCell(2);//添加列内容newProductionIdTD.innerHTML = "<input name='productionId" + rowID + "' id='productionId" + rowID + "' type='text' size='10' />";//添加列:设备类型var newEquipmentTypeIdTD=newTR.insertCell(3);//添加列内容newEquipmentTypeIdTD.innerHTML = "<select name='equipmentTypeId" + rowID + "' id='equipmentTypeId" + rowID + "' style='width:92px;'><option value='0'>请选择</option><option value='1'>普通消费POS</option><option value='2'>公交车载POS</option></select>";//添加列:设备型号var newEquipmentModelTD=newTR.insertCell(4);//添加列内容newEquipmentModelTD.innerHTML = "<input name='equipmentModel" + rowID + "' id='equipmentModel" + rowID + "' type='text' size='10' />";//添加列：备注var newNotesTD=newTR.insertCell(5);//添加列内容newNotesTD.innerHTML = "<input name='notes" +rowID+"'id'=notes"+rowID+"'type='text' size='18' />";//添加列:删除按钮var newDeleteTD=newTR.insertCell(6);//添加列内容newDeleteTD.innerHTML = "<div align='center' style='width:100px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";//将行号推进下一行txtTRLastIndex.value = (rowID + 1).toString() ;}}//删除指定行function DeleteSignRow(rowid){var signFrame = findObj("SignFrame",document);var signItem = findObj(rowid,document);//获取将要删除的行的Indexvar rowIndex = signItem.rowIndex;//删除指定Index的行signFrame.deleteRow(rowIndex);}//清空列表function ClearAllSign(){if(confirm('确定要清空所有吗？')){var signFrame = findObj("SignFrame",document);var rowscount = signFrame.rows.length;//循环删除行,从最后一行往前删除for(var i=rowscount - 1;i > 0; i--){   signFrame.deleteRow(i);}//重置最后行号为1var txtTRLastIndex = findObj("txtTRLastIndex",document);txtTRLastIndex.value = "1";//预添加一行AddSignRow();}}</script>  </head>    <body>  <div style="text-align:center;">新增设备入库<hr/></div>    <table style="margin:0 auto;">  <tr>  <td style="width:100px;">设备厂商</td>  <td style="width:200px; text-align:left;" colspan=3>  <select name="supplierId" id="supplierId" style="width:200px;">    <option value="1111">CMCC-EDU</option>        <option value="2222">ChinaNet</option>        <option value="3333">ChinaUnicom</option>        <option value="4444">SDIPT</option>    </select><span style="color:red;">*</span>  </td>  </tr>  <tr>  <td>经办人</td>  <td style="width:209px; text-align:left;"><input type="text" name="buyPerson" id="buyPerson" /><span style="color:red;">*</span></td>  <td style="width:100px;">日期</td>  <td style="width:350px; text-align:left;"><input class="Wdate" type="text" name="purchaseDate" id="purchaseDate" onClick="WdatePicker()"></td>  </tr>  </table>    <table style="margin:0 auto; margin-top:1px;" id="SignFrame">  <tr id="trHeader">  <td style="width:100px;">设备编号</td>  <td style="width:100px;">设备种类</td>  <td style="width:100px;">出厂编号</td>  <td style="width:100px;">设备类型</td>  <td style="width:100px;">设备型号</td>  <td style="width:150px;">备注</td>  <td style="width:100px;">操作</td>  </tr>  </table>    <table>  <tr>  <td style="width:665px;"></td>  <td style="width:100px;"><a href="javascript:;" onclick="AddSignRow()">添加</a></td>  </tr>  <tr>  <td colspan=2>  <input type="button" name="Submit1" value="保存" onclick="AddEquipment()">  <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />  <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />  </td>  </tr>  </table>    </body></html>
0 0