JS动态创建Table,Tr,Td并赋值
JS动态创建Table,Tr,Td并赋值。
成果库修改:
要求主题列表随成果类型改变而改变
网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table
概要代码如下:
JS部分:
//动态获取主题数据 function getzts(){ parentId = document.getElementById("bselect1").value; if(parentId!=""){ dwrMethod.getZtList(parentId,callback5); }else{ //清空主题Table的数据 www.jbxue.com var t=document.getElementById("zhutiTable"); //获取Table var length= t.rows.length; //获得Table下的行数 if(length!=0){ //如果有行,则清空 for(var i=length-1;i>=0;i--) { t.deleteRow(i); } } var r = t.insertRow(); var c = r.insertCell(); c.innerHTML="暂无主题列表"; document.getElementById('zhutiTable').appendChild(t); } } function callback5(provinces){ var t=document.getElementById("zhutiTable"); //获取Table var length= t.rows.length; //获得Table下的行数 if(length!=0){ //如果有行,则清空 for(var i=length-1;i>=0;i--) { t.deleteRow(i); } } if(provinces.length>0){ for (var i = 0; i < provinces.length; i++) { //tr if(i%4==0){ var r = t.insertRow(t.rows.length);//创建新的行 } //td var c = r.insertCell(); //创建新的列 c.innerHTML = "<input type='checkbox' name='zhutiIds' value="+provinces[i][0]+">"+provinces[i][1]; } }else{ var r = t.insertRow(); var c = r.insertCell(); c.innerHTML="暂无主题列表"; } document.getElementById('zhutiTable').appendChild(t); }
html部分:
<tr> <td class="add_tit">成果类型</td> <td> <s:select id="bselect1" name="pruType1" onchange="getzts();"list="pTypeList" listKey="id" listValue="productionTypeName" headerKey="" headerValue="-- 请选择 --" /> <label class="note4">*</label> </td> </tr> [html] <tr> <td class="add_tit">主题</td> <td id="table1" style="padding-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;"> <table id="zhutiTable" border="0" cellpadding="0" cellspacing="0" width=100% class="table_table"> <tr> <td style="color: red;">注:请先选择成果类型</td> </tr> </table> </td> </tr>