<style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: 1px solid #333; border-left: 1px solid #333; 500px; } td{ border-right: 1px solid #333; border-bottom: 1px solid #333; text-align:center; } .title{ font-weight:bold; background-color: #CFF; } .inputNoBorder { border-style:none; } </style> <script src="js/operation.js"></script> </head> <body> <form> <table width="70%" border="0" cellpadding="0" cellspacing="0" id="order"> <caption> <h3>进销存管理系统-后台进货管理</h3></caption> <tr class="title" > <td width="213">商品名称</td> <td width="146">数量</td> <td width="126">进价</td> <td width="452">操作</td> </tr> <tr > <td><input name="row1" type="text" value="雅芳Avon再生霜" class="inputNoBorder"/></td> <td><input name="row1" type="text" value="100" class="inputNoBorder" size='5'/></td> <td><input name="row1" type="text" value="¥8.50" class="inputNoBorder" size='5'/></td> <td><input name="rowdel" type="button" value="删除" onclick="delRow('order',this)" /> <input id="edit1" type="button" value="修改" onclick='editRow(this)' /></td> </tr> <tr > <td><input name="row1" type="text" value="雅芳Avon防护日霜" class="inputNoBorder"/></td> <td><input name="row1" type="text" value="200" class="inputNoBorder" size='5'/></td> <td><input name="row1" type="text" value="¥6.50" class="inputNoBorder" size='5'/></td> <td><input name="rowde2" type="button" value="删除" onclick="delRow('order',this)" /> <input id="edit2" type="button" value="修改" onclick='editRow(this)' /></td> </tr> <tr > <td><input name="row1" type="text" value="欧珀莱补水妆" class="inputNoBorder"/></td> <td><input name="row1" type="text" value="200" class="inputNoBorder" size='5'/></td> <td><input name="row1" type="text" value="¥10.50" class="inputNoBorder" size='5'/></td> <td><input name="rowde3" type="button" value="删除" onclick="delRow('order',this)" /> <input id="edit3" type="button" value="修改" onclick='editRow(this)' /></td> </tr> <tr> <td colspan="4" style="height:30px;"> <input name="addOrder" type="button" value="增加商品" onclick="addRow('order')" /></td> </tr> </table> </form> </body>
// JavaScript Document function addRow(tableID){ var addTable=document.getElementById(tableID); var rowNums=addTable.rows.length; //返回表格现有行数 //var lastRowId=addTable.rows[rowNums-2].id; //获得倒数一行的id（除去增加商品按钮所在行，id是唯一的，因为表格可能有删除，所以id可能与行号不一致） var newRow=addTable.insertRow(rowNums-1); //插入新行 // newRow.id=parseInt(lastRowId)+1; //设置新插入行的ID var col1=newRow.insertCell(0); col1.innerHTML="<input name='productName' type='text' value='' />"; var col2=newRow.insertCell(1); col2.innerHTML="<input name='amount' type='text' value='' size='5' />"; var col3=newRow.insertCell(2); col3.innerHTML="<input name='InitPrice' type='text' value='' size='5' />"; var col4=newRow.insertCell(3); col4.innerHTML="<input name='del' type='button' value='删除' onclick="delRow('order',this)" /> <input name='save' type='button' value='保存' onclick='saveRow(this)'/>" ; } function delRow(tableID,cellObj){ var trObj=cellObj.parentNode.parentNode ; //获取删除按钮所在的行对象<tr> document.getElementById(tableID).deleteRow(trObj.rowIndex); } function saveRow(cellObj){ var trObj=cellObj.parentNode.parentNode ; //获取保存按钮所在的行对象<tr> for (i=0;i<3;i++){ trObj.cells[i].firstChild.className="inputNoBorder"; //依次将单元格中的文本框设为不带边框的样式，即取消修改状态 trObj.cells[i].firstChild.readOnly=true ; } cellObj.value="修改"; //注意：onclick不是元素的属性，不能这样写： cellObj.onclik="editRow(this)"; cellObj.setAttribute("onclick","editRow(this)"); } function editRow(cellObj){ var trObj=cellObj.parentNode.parentNode ; //获取保存按钮所在的行对象<tr> for (i=0;i<3;i++){ trObj.cells[i].firstChild.readOnly=false ; trObj.cells[i].firstChild.className=""; //依次将单元格中的文本框设为不带边框的样式，即取消修改状态 } cellObj.value="保存"; //注意：onclick不是元素的属性，不能这样写： cellObj.onclik="editRow(this)"; cellObj.setAttribute("onclick","saveRow(this)"); }