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

简介:

效果图:


代码:

<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>






目录
相关文章
|
10天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
111 58
|
2天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
21 4
|
3天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
31 6
|
13天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
18天前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
13 2
|
19天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
26 2
|
15天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
|
18天前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
13 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
106 4