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制作的动态表格,有添加、删除、全选、全不选,有对动态新增的域校验问题,有对新增的域设置readonly问题,还有对新增域中的span进行隐藏问题都有解决,还有对动态表格的讲解PPT一份。
javascript动态添加表格数据行 在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方。比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种...
纯javascript增加删除表格行,新增,删除行
NULL 博文链接:https://long316.iteye.com/blog/1393886
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
javascript动态增删表格行
javascript table 增加删除行
javascript实现动态增加删除表格行(兼容IE FF).docx
JavaScript动态操作表格,添加,删除行、列及单元格
本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码,供大家参考,具体内容如下 动态生成一个带删除行功能的表格: 实现思路 1、获取表格元素 2、获取要填充的数据,一般是从数据库取数据,也...
网页表格用js动态添加一行代码,javascript应用
javascript动态增加、删除、填充表格内容 unction numberCells() { var count=0; for (i=0; i ; i++) { for (j=0; j (i).cells.length; j++) { document.all.mytable.rows(i).cells(j)....
javascript改变表格行的颜色 使用javascript事件更加轻松
我自己写的,那出来与大家分享:javascript下动态创建表格的三种方式
javascript实现的动态增减表格 dom ie
javascript动态创建表格,适合HTML语言初学者使用,亲测可用
然后获取了表格元素及其 tbody 元素,通过 for 循环遍历数组中的每个学生,动态创建了表格的每一行和每个单元格,并将学生的信息填充到对应的单元格中。 最后,为每行的删除操作添加了点击事件处理程序。当用户单击...
JAVASCRIPT 动态复制表格,不错的脚本,推荐你看下了。
NULL 博文链接:https://1148130696.iteye.com/blog/1726191