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动态增删表格行
JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用，特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...
本知识点主要探讨如何使用JavaScript（简称JS）来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本语言，它允许我们对网页进行实时更新和交互，而不需刷新整个页面。 首先，我们需要一个基本的HTML...
JavaScript动态操作表格，添加，删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
在描述中提到的"easyui的datagrid生成合并行,合计计算价格"，指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释： 1. EasyUI DataGrid组件： EasyUI的...
这个"vue.js动态表格增加删除修改代码.zip"文件显然包含了使用Vue.js实现动态表格功能的示例代码。动态表格是网页应用中常见的一种数据展示方式，它允许用户交互地添加、删除和修改数据。 首先，`index.html`文件是...
通过JavaScript，我们可以对这些元素进行动态操作，比如在用户交互时创建、删除或修改表格内容。 JavaScript则赋予了表格生命，使其能够响应用户的输入和操作。例如，使用事件监听器（如 `ondblclick`）可以捕捉到...
在网页开发中，jQuery库因其简洁的语法和强大的功能，被广泛用于处理DOM操作，包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先，我们来理解HTML表格的基本结构。一个表格由`...
在JavaScript编程中，动态添加表格行是一项常见的任务，特别是在创建数据展示或编辑功能时。本文将深入探讨如何使用模板和标记技术来实现这一功能。首先，我们先了解一下基本概念。 **1. 模板（Template）** 模板是...
在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. **删除单元格**：如果要删除某一列，则需要遍历每一行，并对每...
然后获取了表格元素及其 tbody 元素，通过 for 循环遍历数组中的每个学生，动态创建了表格的每一行和每个单元格，并将学生的信息填充到对应的单元格中。 最后，为每行的删除操作添加了点击事件处理程序。当用户单击...
在JavaScript中，操作HTML表格（table）是一种常见的需求，包括获取当前行的值、删除行以及增加行。本文提供了一段代码示例，演示了如何实现这些功能。 首先，我们来详细讲解如何获取表格当前行的值。在这个例子中...
在增加行的场景中，开发者可能通过这两个方法将新行插入到表格中。 2. `remove()`：此方法用于移除DOM中的指定元素，用于删除行的功能。 3. `after()` 和 `before()`：这些方法可以将新的HTML内容插入到已存在元素...