JS动态创建Table，Tr,Td并赋值

来源：互联网发布：ajax代码实例 java 编辑：程序博客网时间：2024/06/06 00:22

iLife's 博客http://blog.csdn.net/fei1502816

成果库修改：

要求主题列表随成果类型改变而改变

网上查询资料后开工，在成果类型下拉框添加change()事件触发Dwr，查询主题集合——动态创建/编辑Table

概要代码如下：

Jsp页面

//动态获取主题数据function getzts(){parentId = document.getElementById("bselect1").value;if(parentId!=""){dwrMethod.getZtList(parentId,callback5);}else{//清空主题Table的数据   var t=document.getElementById("zhutiTable");  //获取Tablevar 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");     //获取Tablevar 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);}

<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>

<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>

LiFei's 博客http://blog.csdn.net/fei1502816