基于js表格的一个进货管理小系统，练习js表格操作

原创

ccna_zhang 2022-09-05 16:57:32 博主文章分类：js ©著作权

文章标签 javascript button input class function 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者ccna_zhang的原创作品，请联系作者获取转载授权，否则将追究法律责任

1：源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于js表格的一个进货管理小系统，练习js表格操作</title>
<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 type="text/javascript">
  function editRow(cellObj) {
    var trObj = cellObj.parentNode.parentNode;
    for(var i = 0; i < 3; i++) {
      trObj.cells[i].firstChild.readOnly = false; //可以写入
      trObj.cells[i].firstChild.className = "";  //设置样式为空
    }
    cellObj.value = '保存';
    cellObj.setAttribute('onclick', 'saveRow(this)');
  }
  
  function saveRow(cellObj) {
    var trObj = cellObj.parentNode.parentNode;
    for(var i = 0; i < 3; i++) {
      trObj.cells[i].firstChild.readOnly = true; //可以写入
      trObj.cells[i].firstChild.className = "inputNoBorder";  //设置样式为空
    }
    cellObj.value = "修改";
    cellObj.setAttribute('onclick', 'editRow(this)');
  }
  
  function delRow(cellObj) {
    var trObj = cellObj.parentNode.parentNode;
    var table = document.getElementById('mytable');
    table.deleteRow(trObj.rowIndex);
  }
  
  function addRow() {
    var tableObj = document.getElementById('mytable');
    var rowNums = tableObj.rows.length;
    var rowObj = tableObj.insertRow(rowNums-1);  //在倒数第二行位置插入一行
    
    var cell0 = rowObj.insertCell(0);
    cell0.innerHTML = "<input type='text' name='productname' value='' />";
    
    var cell1 = rowObj.insertCell(1);
    cell1.innerHTML = "<input type='text' name='productcount' value='' />";
    
    var cell2 = rowObj.insertCell(2);
    cell2.innerHTML = "<input type='text' name='productprice' value='' />";
    
      var cell3 = rowObj.insertCell(3);
    cell3.innerHTML = "<input type='button' name='delbutton' value='删除' οnclick='delRow(this)' /> <input type='button' name='savebutton' οnclick='saveRow(this)' value='保存'/>";
  }
</script>
</head>

<body>
   <table id="mytable" cellpadding="0" cellspacing="0" border="1">
       <tr class="title">
           <td>商品名称</td>
           <td>数量</td>
           <td>进价</td>
           <td>操作</td>
       </tr>
       
       <tr>
           <td><input name="row1" type="text" value="产品1"  class="inputNoBorder" /></td>
           <td><input name="row1" type="text" value="100" class="inputNoBorder" size="5"/></td>
           <td><input type="text" value="¥8.50" class="inputNoBorder" size="5"/></td>
           <td><input name="rowdel" type="button" value="删除" οnclick="javascript:delRow(this)"/>
           <input type="button" name="edit1" value="修改" οnclick="javascript:editRow(this);"/>
           </td>
       </tr>
       
         <tr>
           <td><input name="row1" type="text" value="产品2"  class="inputNoBorder"/></td>
           <td><input name="row1" type="text" value="200" class="inputNoBorder" size="5"/></td>
           <td><input type="text" value="¥10.50" class="inputNoBorder" size="5"/></td>
           <td><input name="rowdel" type="button" value="删除" οnclick="javascript:delRow(this)" />
           <input type="button" name="edit1" value="修改" οnclick="javascript:editRow(this);"/>
           </td>
       </tr>
       
         <tr>
           <td><input name="row1" type="text" value="产品3"  class="inputNoBorder"/></td>
           <td><input name="row1" type="text" value="200" class="inputNoBorder" size="5"/></td>
           <td><input type="text" value="¥6.50" class="inputNoBorder" size="5"/></td>
           <td><input name="rowdel" type="button" value="删除" οnclick="javascript:delRow(this)" />
           <input type="button" name="edit2" value="修改" οnclick="javascript:editRow(this);" />
           </td>
       </tr>
       
       <tr>
         <td colspan="4" style="height: 30px;">
           <input name="addOrder" type="button" value="增加商品" οnclick="javascript:addRow()"/>
         </td>
       </tr>
   </table>
</body>
</html>