jquery动态列表的新增、编辑、删除

本文参考网络的一个例子（提供附件下载）
动态添加行、删除行，保存时遍历某列的值，组成逗号分隔的字符串传到后台，编辑时显示结果集，能继续添加和删除。
主要的代码如下：

$(document).ready(function(){		
	$("#but").click(function(){
		var $table=$("#tzgjz_tab tr");
		var len=$table.length;
		$("#tzgjz_tab").append("<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>"+$("#tzgjz").val()+"</td><td align=\'center\'><a href=\'javascript:deltr("+(len+1)+")\'>删除</a></td></tr>");			
		//清空输入框
		$("#tzgjz").val('');
	})	
})

//删除行
function deltr(index){
	$table=$("#tzgjz_tab tr");
	$("tr[id=\'"+index+"\']").remove();	
}

在body里的table。编辑的时候遍历list，写法与动态拼tr保持一致。table后面跟一个输入框，一个按钮，输入的值点击添加进入动态列表里。

<div>
	<table id="tzgjz_tab" width="50%" align="left" border="0" cellspacing="1" cellpadding="0" bgcolor="#b5d6e6" class="table_edit">
		<tr>
	    	<td width="50" align="center">序号</td>
	      	<td align="center">关键字</td>
	        <td width="80" align="center">操作</td>
	  	</tr>
	  	<s:iterator value="#request.tzgjzList" status="state">
			<tr id="<s:property value="xh+1"/>">
				<td align="center"><s:property value="xh"/></td>
				<td align="center"><s:property value="tzgjz_tab"/></td>
				<td align="center"><a href='javascript:deltr("<s:property value="xh+1"/>")'>删除</a></td>
			</tr>
		</s:iterator>
	</table>
	<div>
		请输入关键字<input type="text" id="tzgjz" />
		<input type="button" id="but" value="添加" />
	</div>
</div>

保存的时候，相加tzgjs_tab列的值，用逗号分隔，然后传给后台处理

var gjz='';
$("table#tzgjz_tab tr td:nth-child(2)").each(function(){
	if($(this).text()!='关键字'){//去掉标题
		if(gjz==''){
			gjz+=$(this).text();
		}else{
			gjz+= ","+$(this).text();
		}
	}
});

效果图1

效果图2