JAVA表格传值问题，求解答。

Posted 2023-02-15

问题：我有一个动态添加行的表格，需要将值传到后台，保存到数据库，请问有什么方法比较合理。
1、一开始准备是用$("#form").serializeArray()，将form中的表格序列化后用AJAX提交，用后台解析，请问这样可以么？如果可以的话，后台应该怎么解析其中表格中的数据？

html代码：

<table width=100% border=0 id="detailTable">
<tr>
<td width="4%">
<input type="checkbox" onclick="checkAll(this)">
</td>
<td width="8%">
订单行号
</td>
<td width="11%">
工具代码
</td>
<td width="8%">
订货数量
</td>
<td width="8%">
单位编码
</td>
<td width="11%">
需求日期
</td>
<td width="8%">
默认子库
</td>
<td>
不含税价
</td>
<td>
实际价格
</td>
<td>
计划价格
</td>
<td>
备注
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" id="0">
</td>
<td>
<input name="podetails[0].polinenumber" style="width: 100%"
id="00" value="00001" readonly="readonly" />
</td>
<td>
<input name="podetails[0].toolcode" style="width: 100%"
id="01" oncontextmenu="return false" onmousedown="rightclick(event,this)" />
</td>
<td>
<input name="podetails[0].qtyordered" style="width: 100%"
id="02" />
</td>
<td>
<input name="podetails[0].unitcode" style="width: 100%"
id="03" oncontextmenu="return false" onmousedown="rightclick(event,this)" />
</td>
<td>
<input name="podetails[0].requiredate" style="width: 100%"
id="04" onclick="return showCalendar(this, '%Y/%m/%d');" />
</td>
<td>
<input name="podetails[0].subinventory" style="width: 100%"
id="05" />
</td>
<td>
<input name="podetails[0].beforetax" style="width: 100%"
id="05" />
</td>
<td>
<input name="podetails[0].saleprice" style="width: 100%"
id="07" />
</td>
<td>
<input name="podetails[0].unitprice" style="width: 100%"
id="08" />
</td>
<td>
<input name="podetails[0].notes" style="width: 90%" id="09" />
</td>
</tr>
</table>
<table width="100%" border="0">
<tr>
<td>

</td>
<th colspan="7" align="left">
<input type="button" value="添加行" onclick="insertRow()">
<input type="button" value="删除行" onclick="deleteRow()">
</th>
<td>

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

JS脚本：

//插入表格行
function insertRow()

var checks = document.getElementsByName("check");
var t = checks.length;
var i = parseInt(checks[parseInt(t-1)].id, 10) + 1;
var polinenumber;
if (t == 0)
polinenumber = "00001";
else
var prenumber = document.getElementById((i-1).toString() + "0").value;
polinenumber =("00000" + (parseInt(prenumber, 10) + 1).toString()).slice(-5);

var detailTable = document.getElementById("detailTable");
var newRow = detailTable.insertRow();
var cell1 = newRow.insertCell();
cell1.innerHTML = '<input type="checkbox" name="check" id="' + i + '">';
var cell2 = newRow.insertCell();
cell2.innerHTML = '<input name="podetails[' + i + '].polinenumber" style="width:100%" id="' + i + '0" value="' + polinenumber + '" readonly="readonly" />';
var cell3 = newRow.insertCell();
cell3.innerHTML = '<input name="podetails[' + i + '].toolcode" style="width:100%" id="' + i + '1" oncontextmenu="return false" onmousedown="rightclick(event,this)" />';
var cell4 = newRow.insertCell();
cell4.innerHTML = '<input name="podetails[' + i + '].qtyordered" style="width:100%" id="' + i + '2" />';
var cell5 = newRow.insertCell();
cell5.innerHTML = '<input name="podetails[' + i + '].unitcode" style="width:100%" id="' + i + '3" oncontextmenu="return false" onmousedown="rightclick(event,this)" />';
var cell6 = newRow.insertCell();
cell6.innerHTML = '<input name="podetails[' + i + '].requiredate" style="width:100%" id="' + i + '4" onclick="return showCalendar(this, "%Y/%m/%d");" />';
var cell7 = newRow.insertCell();
cell7.innerHTML = '<input name="podetails[' + i + '].subinventory" style="width:100%" id="' + i + '5" />';
var cell8 = newRow.insertCell();
cell8.innerHTML = '<input name="podetails[' + i + '].beforetax" style="width:100%" id="' + i + '6" />';
var cell9 = newRow.insertCell();
cell9.innerHTML = '<input name="podetails[' + i + '].saleprice" style="width:100%" id="' + i + '7" />';
var cell8 = newRow.insertCell();
cell8.innerHTML = '<input name="podetails[' + i + '].unitprice" style="width:100%" id="' + i + '8" />';
var cell9 = newRow.insertCell();
cell9.innerHTML = '<input name="podetails[' + i + '].notes" style="width:90%" id="' + i + '9" />';


//删除表格行
function deleteRow()
var detailTable = document.getElementById("detailTable");
var checks = document.getElementsByName("check");
for (var i = checks.length - 1; i >= 0; i--)
if (checks[i].checked)
var index = checks[i].parentNode.parentNode.rowIndex;
if (checks.length > 1)
detailTable.deleteRow(index);
else
alert("\u6700\u540e\u4e00\u884c\u4e0d\u80fd\u5220\u9664\uff01\uff01\uff01");



if (checks.length < parseInt(checks[parseInt(checks.length - 1, 10)].id, 10) + 1)
for (var i = 1; i <= checks.length; i++)
document.getElementById(checks[i-1].id + "0").value = ("00000" + i.toString()).slice(-5);




//重置索引
function resetIndex()

var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)

if(inputs[i].name.indexOf('podetails[')!=-1)

var index =inputs[i].parentNode.parentNode.rowIndex;
inputs[i].name = inputs[i].name.replace(/\d+/,index-1);




//全选
function checkAll(obj)

var checks = document.getElementsByName("check");
for(var i=checks.length-1;i>=0;i--)

checks[i].checked = obj.checked;


后台Java代码：
Form代码：
/*
* Generated by MyEclipse Struts
* Template path: templates/java/JavaClass.vtl
*/
package com.smtcl.business.struts.form;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;

import com.muhe.tools.AutoArrayList;
import com.smtcl.business.beans.Podetail;
import com.smtcl.business.beans.Po;

/**
* MyEclipse Struts
* Creation date: 09-27-2010
*
* XDoclet definition:
* @struts.form name="poForm"
*/
@SuppressWarnings("unchecked")
public class PoForm extends ActionForm
/**
*
*/
private static final long serialVersionUID = 1L;

/*
* Generated fields
*/
/** po property */
private Po po = new Po();

/** pod property */
private List<Podetail> podetails = new AutoArrayList(Podetail.class);

/*
* Generated Methods
*/

/**
* Method validate
* @param mapping
* @param request
* @return ActionErrors
*/
public ActionErrors validate(ActionMapping mapping,
HttpServletRequest request)
// TODO Auto-generated method stub
return null;


/**
* Method reset
* @param mapping
* @param request
*/
public void reset(ActionMapping mapping, HttpServletRequest request)
// TODO Auto-generated method stub


public Po getPo()
return po;


public void setPo(Po po)
this.po = po;


public List<Podetail> getPodetails()
return podetails;


public void setPodetails(List<Podetail> podetails)
this.podetails.clear();
this.podetails = podetails;



/** po property */
private Po po = new Po();

/** pod property */
private List<Podetail> podetails = new AutoArrayList(Podetail.class);

/*
* Generated Methods
*/
处理动态提交的数据，具体方法根据业务需求自动手做。
public class PoAddAction extends Action
/*
* Generated Methods
*/

/**
* Method execute
* @param mapping
* @param form
* @param request
* @param response
* @return ActionForward
*/
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
PoForm poForm = (PoForm) form;// TODO Auto-generated method stub
com.smtcl.business.beans.Po po = poForm.getPo();
List<com.smtcl.business.beans.Podetail> podetails = poForm.getPodetails();
System.out.println(po.getStorerkey());
System.out.println("------");
System.out.println(podetails.size());

return null;

参考技术A 动态表格无法直接提交,最简单的做法是创建一个hidden元素,把表格内容按行列顺序组织成一个字符串,用特殊符号分隔,比如说r1c1,r1c2,r1c3;r2c1,r2c2,r2c3;....以逗号分列,以分号分行,避免使用表格中可能出现的字符作为分隔符,必要时也可以用不可打印字符来分隔,比如说\r,\n,\t等等,服务端接收到这个字符串后对行列进行拆分,然后就可以还原整个表格了追问

能麻烦给个简单的实例代码么，前台后台的，加分。。谢谢

追答

简单写写,看能理解不

浏览器端js:

form名称form1

hidden名称hid
表格名称tab,两行两列

以逗号和分号分隔为例

hid.value = tab.rows[0].cells[0].innerText + "," + tab.rows[0].cells[1].innerText + ";" + tab.rows[1].cells[0].innerText + "," + tab.rows[1].cells[1].innerText

后台端action:
// 切分行
String[] rows = hid.split(";");
// 切分列
String[] row0cols = rows[0].split(",");
String[] row1cols = rows[1].split(",");

没有其他任何特殊技术支持的情况下,这种做法是完全可靠的,就是写起来比较麻烦

本回答被提问者和网友采纳 参考技术B 你这个用的是easyui 这要看你发到后台的数据类型是什么