​本文已参与「新人创作礼」活动，一起开启掘金创作之路。

动态添加行的实现(简略)

html部分

<table class="mytable" >
 <tr>
  <td>	
   <table class="table table-striped table-bordered table-condensed">
   	<!-- 定义表头 -->
	<thead>
	 <tr>
	  <th><span class="help-inline"></span>姓名</th>
	  <th><span class="help-inline"></span>年龄</th>
	  <th><span class="help-inline"></span>身高</th>
	 </tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="5">
				<a href="javascript:"
				   onclick="addAListRow('#AList', AListItemRowIdx, AListItemTpl);AListItemRowIdx = bJcpayListItemRowIdx + 1;"
				   class="btn">添加</a>
		    </td> 
		</tr>
	</tfoot>

	<!-- 定义表格体 -->
	<tbody id="AList"></tbody>
   </table>	

			 
   			 
  </td>		 
 </tr>			 
</table>

js部分

<!-- 实现列表功能项 -->
<script type="text/javascript">		
	//初始化全局参数
	var AListItemRowIdx = 0;
	var AListItemTpl = $("#AListItemTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
	//初始化数据列表
	var data=${fns:toJson(object.AList)};
	if(data){
		for (var i=0; i<data.length; i++){
			addAListRow('#AList', AListItemRowIdx, AListItemTpl,data[i]);
			AListItemRowIdx=AListItemRowIdx+1;
		}
	}
	//新增行
	function addAListRow(list, idx, tpl, row){
		$(list).append(Mustache.render(tpl, {
			idx: idx, delBtn: true, row: row
		}));
	}	

	//删除该行数据
	function delAListRow(obj, prefix) {
		$(obj).parent().parent().remove();
	}
	//删除所有行
	function delAllRow() {
		$("#AList").find("tr").remove();
	}
</script>		

问题描述

添加两行删除一行再添加一行

问题如下

提交后，后端实际获取到三条数据

如下【1】集合实际是空的

问题解决

目前没有想到前端js的解决方法，只能后端去除空元素

	//遍历集合更新每条数据
	List<A> AListO = object.getAList();
	ArrayList<A> AList = new ArrayList<A>();
	//去除空元素
	for(int i=0;i<AListO.size();i++) {
		if(AListO.get(i) != null 
			&& AListO.get(i).getId() != null 
			&& AListO.get(i).getId() != "") {
			AList.add(AListO.get(i));
		}
	}