我需要的是一个非常标准的功能。而且我敢肯定它很容易,但是我却无法实现它。请帮我在这里。
这是方案->
我在jsp上有一个struts表单,其中包含员工信息。现在,我想与每位员工结交一些家庭成员。
因此,我想获得家人的信息:
1.)表单末尾的一行-1个select元素和3个text field元素。
2.)“添加”按钮,可按需添加此类行以添加更多家庭成员。
我不知道如何附上屏幕快照,以使您准确了解我想要的内容。
我尝试使用javascript进行此操作,但是javascript添加了标准HTML元素,因此我无法访问我的action类中那些字段的值。(请告诉我是否不是这种情况,因为那是唯一的剩下的问题是,为什么我无法访问这些值)
目前我正在尝试:
JSP:
<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo"> ////OTHER FORM ELEMENTS////////////// <table> <tr> <td>Relationship</td> <td>Name</td> <td>Age</td> <td>Occupation</td> </tr> <tr> <td> <select name="rel"> <option value=""></option> <option value="Father">Father</option> <option value="Mother">Mother</option> <option value="Spouse">Spouse</option> <option value="Child">Child</option> </select> </td> <td> <input name="rName[]"/></td> <td> <input name="rAge"/> </td> <td> <input name="rOccupation"/> </td> <td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td> </tr> </table> <s:submit value="Add Employee" name="submit"/> <s:reset value="Reset" name="reset"/> </s:form>
JS:
function tryFunc(node){ var root = node.parentNode.parentNode; var allRows = root.getElementsByTagName('tr'); var cRow = allRows[1].cloneNode(true); var cInp = cRow.getElementsByTagName('input'); for(var i=0;i<cInp.length;i++){ cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1)) } var cSel = cRow.getElementsByTagName('select')[0]; cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1)); root.appendChild(cRow); }
这样,我可以添加指定元素的新行,但无法访问操作类中的字段值。我想指出的是,我甚至无法访问action类中的第一行元素(可能是因为它们是标准HTML)。
任何帮助表示赞赏。
谢谢!!
这是该问题的解决方案,对于仍然坚持的人。
在jsp中:
<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo"> ////OTHER FORM ELEMENTS////////////// <table> <tr> <td align="center">Relationship</td> <td align="center">Name</td> <td align="center">Age</td> <td align="center">Occupation</td> </tr> <tr> <td> <select name="rel"> <option value=""></option> <option value="Father">Father</option> <option value="Mother">Mother</option> <option value="Spouse">Spouse</option> <option value="Child">Child</option> </select> </td> <td> <input name="rName"/></td> <td> <input name="rAge"/> </td> <td> <input name="rOccupation"/> </td> </tr> <tr> <td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td> </tr> </table> <s:submit value="Add Employee" name="submit"/> <s:reset value="Reset" name="reset"/> </s:form>
function tryFunc(node){ var root = node.parentNode.parentNode; var allRows = root.getElementsByTagName('tr'); var cRow = allRows[1].cloneNode(true); root.appendChild(cRow); }
然后在动作类中,只需定义如下变量:
private String rel[]; private String rName[]; private String rAge[]; private String rOccupation[];
定义它们的getter和setter,您可以像这样访问jsp中每一行的每个元素:
rel[0], rel[1], ........ rName[0],rName[1], ....... etc......
至于将select元素的Value复制到克隆行,其简单的javascript。只是这样做:
clonedSelect.selectedIndex = original.selectedIndex;
如果仍有问题,请发表评论。:)