今天，应项目需求，涉及到需要在一个页面里动态添加人员信息，表格的动态增删，借助JS控制，先在网上查了几个类似的示例，后来又改了改，就成了现在用的。
JS部分代码如下：
<script>
var rowIndex=0;
function addLine(obj){
var objSourceRow=obj.parentNode.parentNode;
var objTable=obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value=='增加详细伤亡人员信息'){
rowIndex++;
var objRow=objTable.insertRow(rowIndex);
var objCell;
for(i=0;i<18;i++){
objCell=objRow.insertCell(i);
objCell.innerHTML=objSourceRow.cells[i].innerHTML;
}
objCell=objRow.insertCell(18);
objCell.innerHTML=objSourceRow.cells[18].innerHTML.replace(/增加详细伤亡人员信息/,'删除');
}
else{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
}
}
function removeLine(){
}
</script>
jsp页面部分代码：
<table width="100%" border="1" class="tableBorder" align=center >
<tr align="center">
<td height="56" class=forumrow style="display:none">姓名</td>
<td colspan="3" class=forumrow style="display:none" >
<input type="text" name="casualtyName" size="8"/>
</td>
<td class=forumrow style="display:none">性别</td>
<td class=forumrow style="display:none" >
<select name="sex">
<option value="male" selected>男</option>
<option value="female" >女</option>
</select>
</td>
<td class=forumrow style="display:none">用工形式</td>
<td class=forumrow style="display:none">
<select name="useForm">
<option value="FORMAL_WORKER" selected>正式工</option>
<option value="CONTRACT_WORKER">合同工</option>
<option value="TEMP_WORKER">临时工</option>
</select>
</td>
<td class=forumrow style="display:none">工种</td>
<td class=forumrow style="display:none">
<select name="useKind">
<option value="MANAGER" selected>管理人员</option>
<option value="MU_GONG">木工</option>
<option value="WA_GONG">瓦工</option>
<option value="JIA_ZI_GONG">架子工</option>
<option value="GANG_JIN_GONG">钢筋工</option>
<option value="HUN_NING_TU_GONG">混凝土工</option>
<option value="MO_HUI_GONG">抹灰工</option>
<option value="JI_XIE_GONG">机械工</option>
<option value="DIAN_GONG">电工</option>
<option value="DIAN_HAN_GONG">电焊工</option>
<option value="GUAN_GONG">管工</option>
<option value="QIAN_GONG">钳工</option>
<option value="YOU_QI_GONG">油漆工</option>
<option value="FAN_SHUI_GONG">防水工</option>
<option value="TONG_FENG_GONG">通风工</option>
<option value="DIAO_ZHUANG_GONG">吊装工</option>
<option value="BAN_YUN_GONG">搬运工</option>
<option value="LI_GONG">力工</option>
<option value="QIN_ZHA_GONG">勤杂工</option>
</select>
</td>
<td class=forumrow style="display:none">年龄</td>
<td class=forumrow style="display:none">
<input type="text" name="age" size="4"/>
</td>
<td class=forumrow style="display:none">从业时间</td>
<td colspan="3" class=forumrow style="display:none">
<input type="text" name="workTime" size="4"/>
</td>
<td class=forumrow style="display:none">文化程度</td>
<td class=forumrow style="display:none">
<select name="education">
<option value="ELEMENTORY_SCHOOL" selected>小学及以下</option>
<option value="JUNIOR_HIGH_SCHOOL">初中</option>
<option value="SENIOR_HIGH_SCHOOL">高中/中专</option>
<option value="COLLEGE">大专</option>
<option value="GRADUATE">大专以上</option>
</select>
</td>
<td class=forumrow style="display:none">承包形式</td>
<td colspan="3" class=forumrow style="display:none">
<select name="contractTypeDetail">
<option value="ZONG_CHENG_BAO">总承包</option>
<option value="ZHUAN_YE_FEN_BAO">专业分包</option>
<option value="LAO_WU_FEN_BAO">劳务分包</option>
</select>
</td>
<td class=forumrow style="display:none">伤亡情况</td>
<td class=forumrow style="display:none">
<select name="casualtyInfo">
<option value="LIGHT_HURT" selected>轻伤</option>
<option value="HEAVEY_HURT">重伤</option>
<option value="DIE">死亡</option>
</select>
</td>
<td><input name="add" type="button" id="add" value="增加详细伤亡人员信息" onClick="addLine(this)"></td>
</tr>
</table>
ActionForm部分代码：
//伤亡人员
private String age[];
private String casualtyInfo[];
private String contractTypeDetail[];
private String education[];
private Integer id;
private String casualtyName[];
private String sex[];
private String useForm[];
private String useKind[];
private String workTime[];
public String[] getAge() {
return age;
}
public void setAge(String age[]) {
this.age = age;
}
public void setWorkTime(String workTime[]) {
this.workTime = workTime;
}
public void setUseKind(String useKind[]) {
this.useKind = useKind;
}
public void setUseForm(String useForm[]) {
this.useForm = useForm;
}
public void setSex(String sex[]) {
this.sex = sex;
}
public void setcasualtyName(String casualtyName[]) {
this.casualtyName = casualtyName;
}
public void setId(Integer id) {
this.id = id;
}
public void setEducation(String education[]) {
this.education = education;
}
public void setcontractTypeDetail(String contractTypeDetail[]) {
this.contractTypeDetail = contractTypeDetail;
}
public void setCasualtyInfo(String casualtyInfo[]) {
this.casualtyInfo = casualtyInfo;
}
public String[] getCasualtyInfo() {
return casualtyInfo;
}
public String[] getcontractTypeDetail() {
return contractTypeDetail;
}
public String[] getEducation() {
return education;
}
public Integer getId() {
return id;
}
public String[] getcasualtyName() {
return casualtyName;
}
public String[] getSex() {
return sex;
}
public String[] getUseForm() {
return useForm;
}
public String[] getUseKind() {
return useKind;
}
public String[] getWorkTime() {
return workTime;
}
Action部分代码：
/**
* 录入伤亡人员详细信息
*/
int counter = form.getcasualtyName().length;
AccCasualtyPersonDAO perDAO = new AccCasualtyPersonDAO();
AccCasualtyPersonInfo per = new AccCasualtyPersonInfo();
for (int j = 1; j<counter; j++) {
per.setAccNo(accNo);
per.setAge(Integer.valueOf(form.getAge()[j]));
System.out.println("age:"+form.getAge()[j]);
per.setCasualtyInfo(form.getCasualtyInfo()[j]);
System.out.println("CasualtyInfo:"+form.getCasualtyInfo()[j]);
per.setContractType(form.getcontractTypeDetail()[j]);
per.setEducation(form.getEducation()[j]);
per.setName(form.getcasualtyName()[j]);
per.setSex(form.getSex()[j]);
per.setUseForm(form.getUseForm()[j]);
per.setUseKind(form.getUseKind()[j]);
per.setWorkTime(form.getWorkTime()[j]);
if (!perDAO.addAccCasualtyPerson(per)) {
return mapping.findForward("inputKuaibaofail");
}
每行里面的项，都是必须填的，符合项目的需求。此外，也可不用Struts封装同名参数的功能，可以用JavaScript来做传值。