如何實現將JS動態新增的TR中的值傳到後臺中並批量插入
阿新 • • 發佈：2019-01-24
在我的上一篇文章當中，已經在靜態頁面中實現了JS動態新增刪除TR。在實際工作中，更多的是需要將JS所新增的tr中的值儲存至資料庫中。下面我將介紹在SSH框架中如何實現這一功能需求。（以下均由我所做的實際專案給出功能程式碼）
在JSP中，JS程式碼會稍有變化。
function addItem() { var tr = document.getElementById("table_name").insertRow(3); for(var i = 0;i<7;i++){ var td = "td"+i; td = tr.insertCell(); td.width="13%"; td.className = "edit_content_text"; if(i==0){ td.innerHTML = "<input type='text' name='item' />"; }else if(i == 1){ td.innerHTML = "<input type='text' name='desc_comm' />"; }else if(i == 2){ td.innerHTML = "<input type='text' name='pack' />"; }else if(i == 3){ td.innerHTML = "<input type='text' name='ctns' />"; }else if(i == 4){ td.innerHTML = "<input type='text' name='qty' />"; }else if(i == 5){ td.innerHTML = "<input type='text' name='us_lb' />"; }else if(i == 6){ td.innerHTML = "<input type='text' name='amount' />"; } } }
我用的是struts1，輸入框的程式碼是這樣寫的：
<html:text property="item" styleClass="input_text" maxlength="20"/>JS中的item、desc_comm等屬性的值並不需要再刻意賦值至form表單中，因為，這個addItem()本身就是在form表單中呼叫的，因此新新增的tr也就在form表單中。
在後臺接收的程式碼如下：
因為同一個property會對應多個值，因此，接收的時候得用String陣列。這樣，使用一個for迴圈就可以將前臺的資料set至對應的屬性中就OK了。String[] item = request.getParameterValues("item"); String[] desc_comm = request.getParameterValues("desc_comm"); String[] pack = request.getParameterValues("pack"); String[] ctns = request.getParameterValues("ctns"); String[] qty = request.getParameterValues("qty"); String[] us_lb = request.getParameterValues("us_lb"); String[] amount = request.getParameterValues("amount");
之前覺得這挺難的，後來發現其實也就這麼一回事。另外，我做的這個功能還涉及到多表插入以及多表查詢結果集顯示的問題。待我完善了再總結出來。int length = item.length; for(int j = 0;j<length;j++){ //每迴圈一次就要重新new一個物件。不然，只會新增一條資料 Item it = new Item(); it.setItem(item[j]); it.setDesc_comm(desc_comm[j]); it.setPack(pack[j]); it.setCtns(Integer.parseInt(ctns[j])); it.setQty(Integer.parseInt(qty[j])); it.setUs_lb(Integer.parseInt(us_lb[j])); it.setAmount(Integer.parseInt(amount[j])); it.setContract_id(contract_id); //呼叫Item的新增方法 itemService.addItem(it); }