使用js實現新增,刪除表格,並將表格內容批量插入資料庫。
點選新增增加一行,有刪除操作,點選儲存將表格內容插入資料庫。
html 頁面和js如下:
引入jquery jar包,以及Wdatepicker日期控制元件。<table id="mytable"> <thead> <tr align="center"> <td width="120px" height="30px"><span style="font-size: 18px;">序號</span></td> <td width="120px" height="30px"><span style="font-size: 18px;">開始時間</span></td> <td width="120px" height="30px"><span style="font-size: 18px;">結束時間</span></td> <td width="120px" height="30px"><span style="font-size: 18px;">說明</span> <td width="120px" height="30px"><span style="font-size: 18px;">狀態</span></td> </tr> <button type="button" class="btn btn-info"style="float: right; margin-right: 25px;"onclick="add();" >新增</button> </thead> <tbody></tbody> </table> <div style="display: none;"> <table id="trHidden"> <tbody> <tr myindex="12"> <td width="120px" height="30px" class="order" style="text-align: center;"></td> <td width="120px" height="30px" class="begin"><input id="startDate" name="startDate" class="Wdate form-control" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd',readOnly:true})" /></td> <td width="120px" height="30px" class="end"><input id="endDate" name="endDate" class="Wdate form-control" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd',readOnly:true})" /></td> <td width="120px" height="30px" class="remark"><input id="remark" name="remark" type="text" placeholder="" /></td> <td width="120px" height="30px" class="status"><input id="status" name="status" type="text" placeholder="" /></td> <td><button type="button" class="btn btn-info" style="float: right; margin-right: 25px; margin-left: 50px;" onclick="deleteRow(this);">刪除</button></td> </tr> </tbody> </table> </div> <button class="btn btn-success" type="button" style="float: right; margin-right: 25px; margin-left: 50px;" onclick="save()">儲存</button> <hr /> <!-- base js start --> <script th:src="@{{path}/js/base/jquery.min.js(path=${contextPath})}"></script> <script type="text/javascript" th:src="@{{path}/js/My97DatePicker/WdatePicker.js(path=${contextPath})}"></script>
相關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";
}
}
效果如下:
新人一個,親測可用,請各位大神多多指教!