Jquery动态增加行和删除行

1、首先引入Jquery

<script language="javascript" src="jquery-1.7.1.js"></script>

2、在body标签里面新建测试用的table

<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">
<tr id="1"><td width="30%"><input type="text" value="1" id="a1"/></td><td width="30%"><input type="text" value="2" id="a2"/>

</td><td width="30%"><input type="text" value="3" id="a3"/></td><td><input type='button' name='button' value='del' οnclick='deltr(this);'>

</td></td></tr>
<input type="button" name="button" value="add" οnclick="addtr('test');">

3、定义add方法

function addtr(id){
tr_id = $("#test>tbody>tr:last").attr("id");
tr_id++;
//alert(tr_id);
str = "<tr id = '"+tr_id+"'><td width='30%'><input type='text' value='123' /></td><td width='30%'><input type='text' value='123' /></td><td width='30%'>

<input type='text' value='123' /></td><td><input type='button' name='button' value='del' οnclick='deltr(this);'></td></tr>";
$('#'+id).append(str);
}

4、定义删除方法

function deltr(clickTd){
	var tr = $(clickTd).parent().parent();
	tr.remove();
}

5、定义一个函数获取表格的值

function save() {
	var tb = $("#test");
	var tl = tb.find("tr").length;
	var value;
	for (var i = 0 ; i < tl; i++)
	{
		for (var j = 0 ; j < 3 ; j++)
		{
			var a = ($("#test tr:eq("+i+") td:eq("+j+")")).find('input').val();
			alert(a);
		}
		
	}
}