`
wang_zhi_peng2007
  • 浏览: 251815 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript 动态表格增加、删除、行金额计算、合计

 
阅读更多

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="">&nbsp;&nbsp;
		  金额合计:<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。(现还未处理)

 

 

  • 大小: 82.8 KB
分享到:
评论
1 楼 masuweng 2018-02-05  
     

相关推荐

    JavaScript 动态表格

    用JavaScript制作的动态表格,有添加、删除、全选、全不选,有对动态新增的域校验问题,有对新增的域设置readonly问题,还有对新增域中的span进行隐藏问题都有解决,还有对动态表格的讲解PPT一份。

    javascript动态增删表格行

    javascript动态增删表格行

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    javascript动态创建表格

    JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用,特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...

    表格动态插入行

    本知识点主要探讨如何使用JavaScript(简称JS)来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本语言,它允许我们对网页进行实时更新和交互,而不需刷新整个页面。 首先,我们需要一个基本的HTML...

    JavaScript动态操作表格,添加,删除行、列及单元格

    JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    自动增加行的动态表格

    标题“自动增加行的动态表格”揭示了这个项目的核心功能,即实现一个表格,当用户在其中输入数据或达到特定条件时,能够自动添加新的行。这种技术在数据输入、管理或者展示应用中非常常见,比如在线表单、数据库前端...

    vue.js动态表格增加删除修改代码.zip

    这个"vue.js动态表格增加删除修改代码.zip"文件显然包含了使用Vue.js实现动态表格功能的示例代码。动态表格是网页应用中常见的一种数据展示方式,它允许用户交互地添加、删除和修改数据。 首先,`index.html`文件是...

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

    jQuery 动态添加或删除表格行

    在网页开发中,jQuery库因其简洁的语法和强大的功能,被广泛用于处理DOM操作,包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先,我们来理解HTML表格的基本结构。一个表格由`...

    JavaScript实现动态添加表格中的行

    在JavaScript编程中,动态添加表格行是一个常见的需求,特别是在数据可视化或者用户交互丰富的网页应用中。这个功能允许我们在用户操作或者接收到服务器数据时,实时地向HTML表格中插入新的行,更新显示的信息。以下...

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`&lt;table&gt;`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...

    javascript改变表格行的颜色

    在网页开发中,使用JavaScript来动态改变表格行的颜色是一种常见的技术。这种技术不仅可以提升用户体验,还可以增加网站的交互性。本文将详细介绍如何使用JavaScript来实现这一功能,并探讨一些高级用例。 #### 1. ...

    【JavaScript源代码】JavaScript动态生成带删除行功能的表格.docx

    JavaScript动态生成带删除行功能的表格是Web开发中常见的需求,尤其在数据展示或交互式应用中。以下是如何实现这一功能的详细步骤和关键知识点: 首先,我们需要理解基本的HTML结构,这里涉及到一个包含thead(表头...

    javascript表格操作

    在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    JavaScript操作表格

    接下来的内容展示了如何使用JavaScript删除现有的表格行和单元格。 1. **删除行**:通过`_table.deleteRow(index)`方法可以删除指定索引位置的行。 2. **删除单元格**:如果要删除某一列,则需要遍历每一行,并对每...

    JS对表格的动态增加删除行 (多个demo)

    要在表格中动态增加行,首先,我们需要获取到表格对象,通常是`&lt;table&gt;`元素。然后,创建新的`&lt;tr&gt;`元素,接着为这一行创建`&lt;td&gt;`单元格,并填充内容。最后,将新行添加到表格的`&lt;tbody&gt;`或指定位置。 示例代码:...

    JavaScript动态生成表格案例

    然后获取了表格元素及其 tbody 元素,通过 for 循环遍历数组中的每个学生,动态创建了表格的每一行和每个单元格,并将学生的信息填充到对应的单元格中。 最后,为每行的删除操作添加了点击事件处理程序。当用户单击...

    JavaScript获取表格(table)当前行的值、删除行、增加行

    在JavaScript中,操作HTML表格(table)是一种常见的需求,包括获取当前行的值、删除行以及增加行。本文提供了一段代码示例,演示了如何实现这些功能。 首先,我们来详细讲解如何获取表格当前行的值。在这个例子中...

    javascript 拖动表格行和列

    在JavaScript编程中,拖动表格行和列的功能可以极大地提升用户交互体验,使得数据操作更加直观和便捷。本文将深入探讨如何实现这个功能,并提供一些关键知识点。 首先,我们需要了解HTML表格的基本结构,即`&lt;table&gt;...

Global site tag (gtag.js) - Google Analytics