本文介绍了一个能够实现在网页表格中动态增加和删除行的功能，并且每行包含多个级联选择框，通过JavaScript实现了动态生成表格行及级联数据加载。
实现页面点击就增加一行，并且每行数据有二级级联，有些部分是参考网上的知识，并在基础上有些调整。
工作中遇到的问题，记录一下。
首先上关键的页面代码：
<table class="m-table1">
<colgroup>
<col width="15%"/>
<col width="17%"/>
<col width="11%"/>
<col width="21%"/>
<col width="11%"/>
<col width="21%"/>
</colgroup>
<tr>
<th colspan="4" style="text-align: center;">期望工作</th>
</tr>
<tr>
<table class="m-table1" id="tab" width="100%">
<colgroup>
<col width="2%"/>
<col width="18%"/>
<col width="20%"/>
<col width="20%"/>
<col width="20%"/>
<col width="20%"/>
</colgroup>
<tr align="center">
<td width="2%"><input id="allCkb" type="checkbox"/></td>
<td width="18%">期望月薪</td>
<td width="20%">期望工作地区</td>
<td width="20%">行业大类</td>
<td width="20%">行业小类</td>
<td width="20%">工种(建筑工种类别)</td>
</tr>
<tr align="center">
<td width="2%"></td>
<td width="18%">
<input id = "expectMonthlyPay" name = "expectMonthlyPay" value = "${expectMonthlyPay!''}" class="u-ipt u-ipt-w8" style = "width:150px"/>韩元(不含小数点)
</td>
<td width="20%">
<select id = "expectAreaStr1" name = "expectAreaStr" value= "${expectAreaStr!''}"class="u-sel u-ipt-w8" datatype="*" errormsg="请选择工作地区"
tipmsg="请选择工作地区" nullmsg="请选择工作地区" style = "width:300px">
<option value = "">--请选择--</option>
<#list areaList as area>
<option value = "${area.areaCode!''}">
${area.areaChineseName!''}
</option>
</#list>
</select>
</td>
<td width="20%">
<select id = "work_2" name = "work" onchange = "workChange2('2'); " value = "${work1!''}" class="u-sel u-ipt-w8" style = "width:300px">
<option value = "">--请选择--</option>
<#list vocationList as list>
<option value = "${list.vocationCode!''}">
${list.vocationChineseName!''}
</option>
</#list>
</select>
</td>
<td width="20%">
<select id= "workSmall_2" name="workSmall" class="u-sel u-ipt-w8" style = "width:300px">
<option value="-1">--请选择--</option>
</select>
</td>
<td width="20%">
<select id= "" name="kindOfWork" class="u-sel u-ipt-w8" style = "width:300px">
<option value="-1">--请选择--</option>(钢筋工/木工/普通工人/电焊工)
<option value="钢筋工">钢筋工</option>
<option value="木工">钢筋工</option>
<option value="普通工人">普通工人</option>
<option value="电焊工">电焊工</option>
</select>
</td>
</tr>
</table>
<tr>
<td align="left" colspan="12">
<div class="f-tac f-mt10" style="text-align: left;">
<input type="button" οnclick="addTr2('tab', -1)" class="u-btn u-btn-c4" value="+" style="width:25px;height:30px;"/>
<input type="button" οnclick="delTr2()" class="u-btn u-btn-c4" value="-" style="width:25px;height:30px;"/>
</div>
</td>
</tr>
<!-- <input type="button" οnclick="addTr2('tab', -1)" value="添加"/>
<input type="button" οnclick="delTr2()" value="删除"/> -->
</tr>
</table> //点击行业大类要显示的行业的小类
function workChange2(num){
var initStr ="<option value='-1'>--请选择--</option>";
var workId = $("#work_"+num).val(); //这里就是接受动态的传入变量
$.ajax({
url: "${base}/corp/esk/workSmall/"+workId,
type: "get",
dataType: "json",
async: false,//同步
success: function(text){
var str ="";
for (var i = 0; i < text.length; i++) {
var array_element = text[i];
str += "<option value='"+array_element[0]+"'>"+array_element[1]+"</option>";
console.debug(str);
}
$("#workSmall_"+num).html(initStr+str);
$("#workSmall_"+num).show();
}
});
} 然后就是：点击增加就增加一行 对应的js
function addTr(tab, row, trHtml){
//获取table最后一行 $("#tab tr:last")
//获取table第一行 $("#tab tr").eq(0)
//获取table倒数第二行 $("#tab tr").eq(-2)
var $tr=$("#"+tab+" tr").eq(row);
if($tr.size()==0){
alert("指定的table id或行数不存在！");
return;
}
$tr.after(trHtml);
}
function delTr(ckb){
//获取选中的复选框，然后循环遍历删除
var ckbs=$("input[name="+ckb+"]:checked");
if(ckbs.size()==0){
alert("要删除指定行，需选中要删除的行！");
return;
}
ckbs.each(function(){
$(this).parent().parent().remove();
});
}
/**
* 全选
*
* allCkb 全选复选框的id
* items 复选框的name
*/
function allCheck(allCkb, items){
$("#"+allCkb).click(function(){
$('[name='+items+']:checkbox').attr("checked", this.checked );
});
}
添加一行、删除一行测试方法///
$(function(){
//全选
allCheck("allCkb", "ckb");
/* if($("#ckb").val() == 'ckb'){
} */
/* if($("#ckb2").val() == 'ckb2'){
allCheck("allCkb", "ckb2");
}
if($("#ckb3").val() == 'ckb3'){
allCheck("allCkb", "ckb3");
}
if($("#ckb4").val() == 'ckb4'){
alert(1111)
allCheck("allCkb", "ckb4");
} */
});
//期望工作
function addTr2(tab, row){
var trHtml ;
if(tab == 'tab' ){ \"work_'+i+ '\" '<input id="a'+i+'" name="test" type="text" />'
var i = $("table[id$="+tab+"]>tbody").children("tr").length+1;
var tabWorkId = 'work_'+i;
trHtml="<tr align='center'><td width='2%'><input type='checkbox' name='ckb'/></td><td width='18%'><input name = 'expectMonthlyPay' value = '' class='u-ipt u-ipt-w8' style = 'width:150px' />韩元(不含小数点)</td><td width='20%'><select id ='' name = 'expectAreaStr' value= '${expectAreaStr!''}' class='u-sel u-ipt-w8' style = 'width:300px'><option value = ''>--请选择--</option><#list areaList as area><option value = '${area.areaCode!''}''>${area.areaChineseName!''}</option></#list></select></td><td width = '20%'><select id =\'work_"+i+"\' name = 'work2' onchange = 'workChange2(\""+i+"\");' class='u-sel u-ipt-w8' style = 'width:300px'><option value = ''>--请选择--</option><#list vocationList as list><option value = '${list.vocationCode!''}'>${list.vocationChineseName!''}</option></#list></select></td><td><select id= \'workSmall_"+i+"\' name='workSmall' class='u-sel u-ipt-w8' style = 'width:300px'><option value='-1'>--请选择--</option></select></td><td width = '20%'><select id='' name='kindOfWork' class='u-sel u-ipt-w8' style = 'width:300px'><option value='-1'>--请选择--</option><option value='钢筋工'>钢筋工</option><option value='木工'>木工</option><option value='普通工人'>普通工人</option><option value='电焊工'>电焊工</option></select></td></tr>";
}
//语言
if(tab == 'tab2'){
trHtml="<tr align='center'><td width='2%'><input type='checkbox' name='ckb'/></td><td width='49%'><select name = 'languageKind' value = '' class='u-sel u-ipt-w8' datatype='*'>option value = ''>--请选择--</option><#list languageList as item><option value = '${item.languageCode!''}'>${item.languageChineseName!''}</option></#list></select></td><td width='49%'><select name = 'language' value = '' class='u-sel u-ipt-w8'><option value = ''>--请选择--</option><option value = '1'>普通</option><option value = '2'>良好</option><option value = '3'>熟练</option><option value = '4'>精通</option></select></td></tr>";
}
//职业证书
if(tab == 'tab3'){
trHtml="<tr align='center'><td width='2%'><input type='checkbox' name='ckb'/></td><td width='23%'><select name = 'certificateCode' value = '' class='u-sel u-ipt-w8'><option value = ''>--请选择--</option><#list certificateList as list><option value = '${list.certificateCode!''}'>${list.certificateChineseName!''}</option></#list></select></td><td width = '25%'><select name = 'areaCode' value = '${areaCode!''}' class='u-sel u-ipt-w8'><option value = '' >--请选择--</option><#list certAreaList as list><option value ='${list.areaCode!''}'>${list.areaChineseName!''}</option></#list></select></td><td><input name = 'grantDateStr' value = '${grantDateStr!''}' class='u-ipt Wdate tipmsg1' onClick=\"WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})\" style = 'width:300px'/></td><td><input name = 'certificateName' value = '${certificateName!''}' class='u-ipt u-ipt-w8' /></td></tr>";
}
if(tab == 'tab4'){
var n = $("table[id$="+tab+"]>tbody").children("tr").length+1;
trHtml="<tr align='center'><td width='2%'><input type='checkbox' name='ckb'/></td><td width='18%'><select id = '' name = 'areaCode1' value = '${areaCode1!''}' class='u-sel u-ipt-w8'><option value = ''>--请选择--</option><#list certAreaList as list><option value ='${list.areaCode!''}'>${list.areaChineseName!''}</option></#list></select></td><td width='20%'><input id = '' name = 'endDate' value = '${endDate!''}' onClick=\"WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})\" class='u-ipt u-ipt-w8'></td><td width = '20%'><select id = \'industry_"+n+"\' name = 'industry' onchange = 'workChange4(\""+n+"\");' value = '${industry!''}' class='u-sel u-ipt-w8' style = 'width:300px'><option value = ''>--请选择--</option><#list vocationList as list><option value = '${list.vocationCode!''}'>${list.vocationChineseName!''}</option></#list></select></td><td width = '20%'><select id =\'industrySmall_"+n+"\' name='industrySmall' class='u-sel u-ipt-w8' style = 'width:300px'><option value='-1'>--请选择--</option></select></td><td width = '20%'><select id= '' name='kindOfIndustryWork' class='u-sel u-ipt-w8' style = 'width:300px'><option value='-1'>--请选择--</option><option value='钢筋工'>钢筋工</option><option value='木工'>木工</option><option value='普通工人'>普通工人</option><option value='电焊工'>电焊工</option></select></td></tr>";
}
addTr(tab, row, trHtml);
}
function delTr2(){
delTr('ckb');
}这里关键代码：
trHtml="<tr align='center'><td width='2%'><input type='checkbox' name='ckb'/></td><td width='18%'><input name = 'expectMonthlyPay' value = '' class='u-ipt u-ipt-w8' style = 'width:150px' />韩元(不含小数点)</td><td width='20%'><select id ='' name = 'expectAreaStr' value= '${expectAreaStr!''}' class='u-sel u-ipt-w8' style = 'width:300px'><option value = ''>--请选择--</option><#list areaList as area><option value = '${area.areaCode!''}''>${area.areaChineseName!''}</option></#list></select></td><td width = '20%'><select id =\'work_"+i+"\' name = 'work2' onchange = 'workChange2(\""+i+"\");' class='u-sel u-ipt-w8' style = 'width:300px'><option value = ''>--请选择--</option><#list vocationList as list><option value = '${list.vocationCode!''}'>${list.vocationChineseName!''}</option></#list></select></td><td><select id= \'workSmall_"+i+"\' name='workSmall' class='u-sel u-ipt-w8' style = 'width:300px'><option value='-1'>--请选择--</option></select></td><td width = '20%'><select id='' name='kindOfWork' class='u-sel u-ipt-w8' style = 'width:300px'><option value='-1'>--请选择--</option><option value='钢筋工'>钢筋工</option><option value='木工'>木工</option><option value='普通工人'>普通工人</option><option value='电焊工'>电焊工</option></select></td></tr>";id =\'work_"+i+"\' onchange = 'workChange2(\""+i+"\");'这里的id 是动态增加， 然后有个字符串的转义 遇到一个严重问题。
动态的变量
\""+i+"\"这里还有一个问题将变量传入 function（）方法，就是
onchange = 'workChange2(\""+i+"\");'
扫一扫
4759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
