??????? 今天,應項目需求,涉及到需要在一個頁面里動態添加人員信息,表格的動態增刪,借助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來做傳值。