我写的一段JS实现TABLE统计功能的代码(未兼容昨天那段代码的JS功能)

效果图:

我写的一段JS实现TABLE统计功能的代码(未兼容昨天那段代码的JS功能)_第1张图片

代码:

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
function AddRecord()   
{   
  var  row  =  tlist.insertRow(tlist.rows.length-2);  
  row.className='tit3';  
  var  i  =  row.rowIndex;   
  var  col  =  row.insertCell(0);     
  col.innerHTML  =  " <input type='text' name='Option' size=12 maxlength=12>";     
  col  =  row.insertCell(1);     
  col.innerHTML  =  " <input type='text' name='Serial' size=32 maxlength=100>";     
  col  =  row.insertCell(2);     
  col.innerHTML  =  " <input type='text' name='Number' size=7 maxlength=7 >";     
  col  =  row.insertCell(3);     
  col.innerHTML  =  " <input type='text' name='LName' size=6 maxlength=6 >";     
  col  =  row.insertCell(4);     
  col.innerHTML  =  " <input type='text' name='Position' size=4 maxlength=4>";     
  col  =  row.insertCell(5);     
  col.innerHTML  =  " <input type='text' name='Amount' size=4 maxlength=4 value='0' onchange='chtotal(this);'>";  
  col  =  row.insertCell(6);     
  col.innerHTML  =  " <input type='text' name='Price' size=4 maxlength=4 value='0' onchange='chtotal(this);'>";    
  col  =  row.insertCell(7);     
  col.innerHTML  =  " <input type='text' name='Total' size=8 readonly value='0'>";     
  col  =  row.insertCell(8);     
  col.innerHTML  =  " <input type='text' name='fremarks' size=20 maxlength=100>";  
  col  =  row.insertCell(9);     
  col.innerHTML  =  " <input type='button' value='删除' name='del' onclick='delrecord(this);'>";   
}  

function chtotal(e)  
{ 

var obj=e.parentNode.parentNode;  
var id=parseInt(obj.rowIndex)-1; 
var Amount=document.getElementsByName("Amount")[id];  
var Price=document.getElementsByName("Price")[id];  
var Total=document.getElementsByName("Total")[id];  
var delbutton=document.getElementsByName("del");  
var znum= document.getElementById("znum");  
var newzum=0;  
Total.value = Amount.value * Price.value;  
for(var j=0;j <delbutton.length;j++)  
{  
  newzum+=parseFloat(document.getElementsByName("Total")[j].value);  
}  
znum.innerHTML =newzum; 

var znum= document.getElementById("zamount");  
var newamount=0
for(var k=0;k <delbutton.length;k++)  
{  
  newamount+=parseFloat(document.getElementsByName("Amount")[k].value);  
}  
zamount.innerHTML =newamount; 

} 

function delrecord(obj)  
{  
  obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);  
  var delbutton=document.getElementsByName("del");  
  var newzum=0;  
  for(var j=0;j <delbutton.length;j++)  
  {  
  newzum+=parseFloat(document.getElementsByName("Total")[j].value);  
  }  
  znum.innerHTML =newzum;  
  
    var newamount=0;  
  for(var k=0;k <delbutton.length;k++)  
  {  
  newamount+=parseFloat(document.getElementsByName("Amount")[k].value);  
  }  
  zamount.innerHTML =newamount;  
  
}  
</script>
</head>
<body>
<div id="d1">
<input type="button"  value="创建" onclick="addTable()">
<input type="button"  value="添加" onclick="AddRecord()">
<input type="button"  value="删除" onclick="deleteRow()">
<input type="button"  value="保存" onclick="saveTable()">
<input type="button"  value="编辑" onclick="editTable()">
<input type="button"  value="复制">
</div>

<div id="d2">
<table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">  
    <tr class="tit2">  
    <td>选项</td> <td>序号 </td> <td>编号 </td><td>名称 </td><td>位置 </td><td>数量 </td> <td>单价 </td> <td>价格 </td><td>操作 </td>  
    </tr>  
    <tr class="tit3">  
    <td><input type="text" name="Option" size=12 maxlength=12> </td>  
    <td><input type="text" name="Serial" size=32> </td>  
    <td><input type="text" name="Number" size=7 maxlength=7 > </td>  
    <td><input type="text" name="LName" size=6 maxlength=6 > </td>  
    <td><input type="text" name="Position" size=4 maxlength=4> </td>  
    <td><input type="text" name="Amount" size=4 maxlength=4 value='0' onchange='chtotal(this);'> </td>     
	<td><input type="text" name="Price" size=4 maxlength=4 value='0' onchange='chtotal(this);'> </td>     
    <td><input type="text" name="Total" size=8 readonly value='0'> </td>  
    <td><input type="text" name="fremarks" size=20 maxlength=100> </td>  
    <td><input type="button" value="删除" name='del' onclick="delrecord(this);"> </td>  
    </tr>  
    <tr class="tit3"> 
	<td>统计栏 </td> 
	<td colspan=4> </td> 
	<td colspan=2 align='left'> <b id="zamount">0 </b> </td> 
	<td colspan=1 align='left'> <b id="znum">0 </b> </td> 
	<td colspan=2> </td> 
	</tr>  
    
	<tr class="tit2">  
    </tr>  
    </table> 
</div>


</body>
</html>






你可能感兴趣的:(function,table,Class,input,button,border)