JS動態創建Table,Tr,Td並賦值的具體實現

　　成果庫修改
      要求主題列表隨成果類型改變而改變
      網上查詢資料後開工在成果類型下拉框添加change()事件觸發Dwr查詢主題集合——動態創建/編輯Table
      概要代碼如下
JS
 

復制代碼 代碼如下:
//動態獲取主題數據
function getzts(){
    parentId = documentgetElementById("bselect")value;
    if(parentId!=""){
        dwrMethodgetZtList(parentIdcallback);
    }else{
        //清空主題Table的數據                  
        var t=documentgetElementById("zhutiTable");  //獲取Table
        var length= trowslength;          //獲得Table下的行數
        if(length!=){              //如果有行則清空
            for(var i=length;i>=;i) 
            { 
             tdeleteRow(i);    
            }
        }
        var r = tinsertRow();
        var c = rinsertCell();
        cinnerHTML="暫無主題列表";
        documentgetElementById(zhutiTable)appendChild(t);
    }
}
function callback(provinces){
    var t=documentgetElementById("zhutiTable");     //獲取Table
    var length= trowslength;             //獲得Table下的行數
    if(length!=){                      //如果有行則清空
        for(var i=length;i>=;i) 
            { 
                tdeleteRow(i);    
                } 
    }
    if(provinceslength>){                          
        for (var i = ; i < provinceslength; i++) {
            //tr
                    if(i%==){
                        var r = tinsertRow(trowslength);//創建新的行
                     }
                    //td 
            var c = rinsertCell();                //創建新的列
            cinnerHTML = "<input type=checkbox name=zhutiIds value="+provinces[i][]+">"+provinces[i][];
            }
    }else{
        var r = tinsertRow();
        var c = rinsertCell();
        cinnerHTML="暫無主題列表";
    }
    documentgetElementById(zhutiTable)appendChild(t);
}

　　
html

復制代碼 代碼如下:

　　
<tr>
    <td class="add_tit">成果類型</td>
    <td>
       <s:select id="bselect" name="pruType" onchange="getzts();"list="pTypeList" listKey="id" listValue="productionTypeName" headerKey="" headerValue="  請選擇  " />
       <label class="note">*</label>
    </td>
</tr>
[html]
<tr>
     <td class="add_tit">主題</td>
     <td id="table" style="paddingleft:px;paddingtop:px;paddingright:px;paddingbottom:px;">
        <table id="zhutiTable" border="" cellpadding="" cellspacing="" width=% class="table_table">
       <tr>
        <td style="color: red;">注:請先選擇成果類型</td>
       </tr>
        </table>
     </td>
</tr>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19848.html