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的数据                  
        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' 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>成果类型</td>
    <td>
       <s:select onchange="getzts();"list="pTypeList" listKey="id" listValue="productionTypeName" headerKey="" headerValue="--  请选择  --" />
       <label>*</label>
    </td>
</tr>
[html]
<tr>
     <td>主题</td>
     <td>
        <table cellpadding="0" cellspacing="0" width=100%>
       <tr>
        <td>注:请先选择成果类型</td>
       </tr>
        </table>
     </td>
</tr>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgwpz.html