JavaScript 动态表格增加、删除、行金额计算、合计
JavaScript 动态表格操作
1. form1.html
<html> <head> <title>js计算材料的价格、统计数量(金额)</title> <link href="table.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="text-align:center"> <table> <font color="#FF0000">*</font> <input type="text" name="name" class="underline" value="2014年度">商品明细表<br> <input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();"> </table> <table id ="table1" class="gridtable" > <thead> <tr> <th width="60">序号</th> <th width="100">商品编码</th> <th width="100">商品名称</th> <th width="100">规格型号</th> <th width="100">数量</th> <th width="100">商品价</th> <th width="100">金额</th> <th width="100">操作</th> </tr> </thead> <tbody id="mybody"> <!---动态表格操作区域---> </tbody> </table> <table id ="table2" class="gridtable" > <tr> <td colspan="8"> 数量合计:<input type="text" id="total_num" class="underline" value=""> 金额合计:<input type="text" id="total_sum" class="underline" value=""> </td> </tr> </table> </div> </body> </html> <script> //全局变量 var i=0; /**增加一行记录**/ function addMyRow(){ var mytable = document.getElementById("mybody"); var mytr = mytable.insertRow(); //插入行 mytr.setAttribute("id","tr"+i); //设定行id //插入行单元格的值 mytr.insertCell(0).innerHTML = i+1; mytr.insertCell(1).innerHTML="<input type='text' class='underline' id='bm"+i+"' value='' />"; mytr.insertCell(2).innerHTML="<input type='text' class='underline' id='name"+i+"' value='' />"; mytr.insertCell(3).innerHTML="<input type='text' class='underline' id='type"+i+"' value='' />"; mytr.insertCell(4).innerHTML="<input type='text' class='underline' id='num"+i+"' value='' onChange='total("+i+")'/>"; mytr.insertCell(5).innerHTML="<input type='text' class='underline' id='price"+i+"' value='' onChange='total("+i+")'/>"; mytr.insertCell(6).innerHTML="<input type='text' class='underline' id='sumX"+i+"' value='' onChange='total("+i+")'/>"; mytr.insertCell(7).innerHTML="<input type='button' value='删除' name='deleteButton' onclick='delMyRow1("+i+");'>"; //mytr.insertCell(7).innerHTML="<input type='button' value='删除' name='deleteButton' onclick='delMyRow2(this);'>"; i++; } /***删除当前行 (根据行号删除)***/ function delMyRow1(j){ var mytable = document.getElementById("mybody"); //获取到table对象 var myrow = document.getElementById("tr"+j); //获取到tr对象 mytable.deleteRow(myrow.rowIndex-1); //trObject.rowIndex() rowIndex 属性返回某一行(rows )在表格的行集合中的位置(row index)。 resetRowIndex(); //重置序列号 //total(); } /***删除当前行(根据对象删除)***/ function delMyRow2(obj){ var row1 = obj.parentElement.parentElement.rowIndex; var mytable = document.getElementById("mybody"); mytable.deleteRow(row1-1); //删除行 } /**重新生成序列**/ function resetRowIndex(){ var tbody = document.getElementById("mybody"); var rows = tbody.rows; for(var i = 0;i<rows.length;i++){ rows[i].cells[0].innerHTML = i+1; } } /**删除所有行**/ function delAllMyRow(){ var mytable = document.getElementById("mybody"); var rowlen=mytable.rows.length; for(var i=rowlen-1;i>=0;i--){ mytable.deleteRow(i); } } /**计算金额**/ function sumPrice(i){ var sumprice=0; var price = document.getElementById ("price"+i).value; var num = document.getElementById ("num"+i).value; //alert("数量=="+num+" 价格=="+price); if(num!="" && price!=""){ sumprice =parseFloat(num) * parseFloat(price); } document.getElementById ("sumX"+i).value = sumprice; } /**合计数量、金额**/ function total(i){ sumPrice(i); var sum1 = 0; //合计数量 var sum2 = 0; //合计金额 var obj = document.getElementById("mybody"); //取mybody对象 var length = obj.rows.length ; alert("当前行数=="+length); for(var i=0; i<length; i++ ) { if(document.getElementById ("num"+i).value!=""){ sum1 =parseFloat(sum1) + parseFloat(document.getElementById ("num"+i).value); } if(document.getElementById ("sumX"+i).value!=""){ sum2 =parseFloat(sum2) + parseFloat(document.getElementById ("sumX"+i).value); } } document.getElementById ("total_num").value = sum1; document.getElementById ("total_sum").value = sum2; } </script>
2. table.css
/**下划线**/ .underline{ border-color: #0066ff; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; width:80px; } /**表格样式设置**/ table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; width: 900px; } table.gridtable th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; text-align:center; } table.gridtable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; }
注:动态删除表格中间行记录时,统计数据存在bug。(现还未处理)
相关推荐
在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...
- **动画效果**:添加过渡动画可以使用户体验更好,比如在删除行时淡出,增加行时淡入。 - **性能优化**:大量操作DOM可能导致页面重绘,可以考虑使用`documentFragment`批量操作后一次性插入,减少对DOM的操作次数...
在使用JQuery来实现动态表格增加行的场景中,主要涉及到的技术点包括: 1. DOM操作:文档对象模型(DOM)允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中,DOM操作用于动态地向表格中插入新的...
本知识点主要探讨如何使用JavaScript(简称JS)来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本语言,它允许我们对网页进行实时更新和交互,而不需刷新整个页面。 首先,我们需要一个基本的HTML...
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
4. **数据管理**:如果表格数据存储在JavaScript数组中,那么在添加、删除或编辑行时,也应同步更新数组。这有助于保持数据的一致性,并可能用于其他操作,如排序或过滤。 5. **模板字符串**:在创建新的HTML元素时...
### JavaScript 实现动态增加删除表格行(兼容IE/FF) #### 概述 本文将详细介绍如何使用JavaScript来实现在Web页面上动态增加和删除表格行的功能,并确保该功能在Internet Explorer (IE) 和 Firefox (FF) 等...
在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...
标题“自动增加行的动态表格”指的是在网页中实现一种交互式表格,它能够自动添加新的行数据,这种功能在数据录入、管理或展示时非常有用。动态表格通常结合前端JavaScript库或者自定义脚本来实现,允许用户无须刷新...
在网页开发中,jQuery库因其简洁的语法和强大的功能,被广泛用于处理DOM操作,包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先,我们来理解HTML表格的基本结构。一个表格由`...
本话题将深入探讨如何实现一个动态表格,用户可以适时添加、删除和复制表格中的行。 首先,我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器,获取或提交数据,然后使用JavaScript处理这些...
在JavaScript编程中,动态添加表格行是一个常见的需求,特别是在数据可视化或者用户交互丰富的网页应用中。这个功能允许我们在用户操作或者接收到服务器数据时,实时地向HTML表格中插入新的行,更新显示的信息。以下...
本压缩包中的"javascript 动态创建表格:新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先,我们要理解表格在HTML中的基本结构,它由`<table>`元素包含,内部包含`...
### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`<table>`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...
在网页开发中,使用JavaScript来动态改变表格行的颜色是一种常见的技术。这种技术不仅可以提升用户体验,还可以增加网站的交互性。本文将详细介绍如何使用JavaScript来实现这一功能,并探讨一些高级用例。 #### 1. ...
JavaScript动态生成带删除行功能的表格是Web开发中常见的需求,尤其在数据展示或交互式应用中。以下是如何实现这一功能的详细步骤和关键知识点: 首先,我们需要理解基本的HTML结构,这里涉及到一个包含thead(表头...
在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
接下来的内容展示了如何使用JavaScript删除现有的表格行和单元格。 1. **删除行**:通过`_table.deleteRow(index)`方法可以删除指定索引位置的行。 2. **删除单元格**:如果要删除某一列,则需要遍历每一行,并对每...
本教程主要聚焦于如何使用JavaScript进行一些经典的操作,如动态增加行、删除行、实现全选功能以及清除全部数据等。这些功能对于提升用户体验和增强交互性至关重要。 1. **创建表格**:在HTML中,`<table>`元素是...
要在表格中动态增加行,首先,我们需要获取到表格对象,通常是`<table>`元素。然后,创建新的`<tr>`元素,接着为这一行创建`<td>`单元格,并填充内容。最后,将新行添加到表格的`<tbody>`或指定位置。 示例代码:...