使用js实现动态新增，删除表格，并将表格数据批量插入数据库。

点击新增增加一行，有删除操作，点击保存将表格内容插入数据库。
html 页面和js如下：

测试记录

新增

	

		

				       
序号
                                    
开始时间
				    
结束时间
				     
说明
				      
状态
 	               
		
											
											

										
										
									

										

											

												

												

													

													

													

													

													
删除
												
											
										
									
									保存
		

引入jquery jar包，以及Wdatepicker日期控件。

相关js如下:

			function deleteRow(obj) {
		var theIndex=$(obj).parent().parent().attr("myindex");
		$("#mytable >tbody >tr[myindex="+theIndex+"]").remove();
		sorttable();
	}
	
	function add() {
		var tableSize = $("#mytable >tbody >tr").size();
		var trHidden = $("#trHidden >tbody").clone();
		var cLen=eval(tableSize);
		$(trHidden).children("tr").attr("myindex", cLen);
		$(trHidden).children("tr").attr("myindex");
		$(trHidden).children("tr").children(".order").text(cLen+1);
		$(trHidden).children("tr").children(".begin");
		$(trHidden).children("tr").children(".end");
		$(trHidden).children("tr").children(".remark");
		$(trHidden).children("tr").children(".status");
		console.log($(trHidden).text());
		$("#mytable >tbody").append($(trHidden).html());
	}


	function sorttable(){
		var tableSize = $("#mytable >tbody >tr").size();
		$("#mytable >tbody >tr").each(function(index,element){
			$(element).attr("myindex", index);
		})
	}
	
	function save(){
		var str1= " input ";
		var s = 0;
		var m = new Map();
		$(str1).each(function() {
			var str=$(this).val();
			s++;
			m.set(s%4 ,str);
			if(s%4 == 0){
				console.log(m.get(1)+" ---  "+ m.get(2)+" ---  "+ m.get(3)+" ---  "+m.get(0));
				
				fnSaveAjax(m.get(1),m.get(2),m.get(3),m.get(0)) ; 
			}
		})
	}
	
	function fnSaveAjax(startDate,endDate,remark,status){
		$.ajax({
			url:"/jgly/test/te",
			type:"get",
			data:{	"startDate" : startDate,
					"endDate" : endDate,
					"remark" : remark,
					"status" : status
			},
			contentType : 'application/json',
	        success: function (data) {
	
	        }
			
		});
	}  

Controller层操作如下：

package com.lyjgse.oa.test.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.lyjgse.oa.test.model.TestDemo;
import com.lyjgse.oa.test.service.TestService;

@Controller
@RequestMapping(“test”)
public class testcontroller {
Logger logger = Logger.getLogger(testcontroller.class);
@Autowired
private TestService ts;

int init =  0;
@RequestMapping("demo")
public String demo(){
	
	return "test";
}

@RequestMapping(value="te",method=RequestMethod.GET)
public String test(HttpServletRequest request,HttpServletResponse response) throws Exception{
	
	String startDate = request.getParameter("startDate");
	String endDate = request.getParameter("endDate");
	String remark = request.getParameter("remark");
	String status = request.getParameter("status");
	if (StringUtils.isEmpty(startDate)||StringUtils.isEmpty(endDate)) {
		response.sendRedirect(request.getContextPath()+"/test/demo");
	}else{
   String year=StringUtils.substring(startDate, 0, 4);
   String startDate1=StringUtils.substring(startDate, 5, 11);
   String endDate1=StringUtils.substring(endDate, 5, 11);
   TestDemo td=new TestDemo();
   td.setYear(year);
   td.setBeginTime(startDate1);
   td.setEndTime(endDate1);
   td.setRemark(remark);
   td.setStatus(status);
  ts.addmodel(td);
	};
	
	System.out.println(" =======================第  "+(++init)+" 条 , "+startDate+"  , "+endDate+"  , "+remark+"  , "+status);
	return "test";
}	

}
效果如下：

新人一个，亲测可用，请各位大神多多指教！