在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行,很多情况下我们都是在页面来设置一个隐藏域的值,然后在js方法里动态的++或--,在学习jQuery的过程中,我试着用简单的方法来模拟实现这一个过程
效果图如下:
删除之前
删除2行后:
改进后具体代码如下:
2 < html xmlns = " http://www.w3.org/1999/xhtml " >
3 < head >
4 < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " />
5 < script type = " text/javascript " src = " jquery-1.3.1.js " ></ script >
6 < title ></ title >
7 < script >
8 $(document).ready( function () {
9 //<tr/>居中
10 $("#tab tr").attr("align","center");
11
12 //增加<tr/>
13 $("#but").click(function(){
14 var _len = $("#tab tr").length;
15 $("#tab").append("<tr id="+_len+" align='center'>"
16 +"<td>"+_len+"</td>"
17 +"<td>Dynamic TR"+_len+"</td>"
18 +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"
19 +"<td><a href=\'#\' οnclick=\'deltr("+_len+")\'>删除</a></td>"
20 +"</tr>");
21 })
22 } )
23
24 // 删除<tr/>
25 var deltr = function (index)
26 {
27 var _len = $("#tab tr").length;
28 $("tr[id='"+index+"']").remove();//删除当前行
29 for(var i=index+1,j=_len;i<j;i++)
30 {
31 var nextTxtVal = $("#desc"+i).val();
32 $("tr[id=\'"+i+"\']")
33 .replaceWith("<tr id="+(i-1)+" align='center'>"
34 +"<td>"+(i-1)+"</td>"
35 +"<td>Dynamic TR"+(i-1)+"</td>"
36 +"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
37 +"<td><a href=\'#\' οnclick=\'deltr("+(i-1)+")\'>删除</a></td>"
38 +"</tr>");
39 }
40
41 }
42 </ script >
43 </ head >
44 < body >
45
46 < table id = " tab " border = " 1 " width = " 60% " align = " center " style = " margin-top:20px " >
47 < tr >
48 < td width = " 20% " > 序号 </ td >
49 < td > 标题 </ td >
50 < td > 描述 </ td >
51 < td > 操作 </ td >
52 </ tr >
53 </ table >
54 < div style = " border:2px;
55 border-color:#00CC00;
56 margin-left:20%;
57 margin-top:20px " >
58 < input type = " button " id = " but " value = " 增加 " />
59 </ div >
60 </ body >
61 </ html >
62
原文链接
http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
增加一个动态更新总额的
二)统计更新总金额
function UpdateTotal()//更新总金额
{
var vTotalMoney=0;//总金额的初始值为0;
var vTable=$("#tbin");//得到表格的jquery对象
var vTotal= vTable.find("#txtTotal") ;//得到总金额对象
var vtxtAfters=vTable.find("#txtMoney");//得到所有计算好的费用对象;
vtxtAfters.each( //使用jQuery的each函数遍历每行费用对象,累加成总金额
function(i)
{
var vTempValue=$(this).val();
if(vTempValue=="")
{
vTempValue=0;
}
vTotalMoney=vTotalMoney+parseFloat(vTempValue);//计算总费用
}
)//遍历结束
vTotal.val(vTotalMoney); //将总费用显示到对应文本框对象中
}