动态添加，删除和保存 

<style type="text/css">
body{
    font-size:13px;
    line-height:25px;
    }
table{
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    width: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="&yen;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="&yen;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="&yen;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)");
}

 

posted @ 2013-11-16 11:55  914556495  阅读(253)  评论(0)  编辑  收藏  举报