js動態添加table 數據tr td

成果庫修改：
      要求主題列表隨成果類型改變而改變
      網上查詢資料後開工，在成果類型下拉框添加change()事件觸發Dwr，查詢主題集合——動態建立/編輯Table
      概要代碼以下：
 
Jsp頁面
[javascript]
//動態獲取主題數據 
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' 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> 

 

 

 

 

 

 

 

 

 

 

 

---------------------------------------------------------------------------------------------我是分割線-----------------------------------------------------------------------------------------------------------

 

    function TbHeartrates()
    {
        $.post(window.location.href, { "action": "tbHeartrates" }, function (msg) {
            if (msg != "") {
                alert("1");
                var obj = eval("(" + msg + ")");
                var num = obj.rows.length;
                //var aa = document.getElementById('tbheartrates');
                $('#tbheartrates').append('<tr><th>測試日期</th><th>測試結果</th><th>正常範圍</th> <th>單位</th><th>舒適提示</th><th></th><th></th><th></th><th></th></tr>');
                for (var i = 0; i < num; i++) {
                    var trObjs = document.createElement("tr");
                    trObjs.innerHTML = '<td class="tdfirstline">11月10日</td>  <td class="tdsecondline">' + obj.rows[i].JSON_ecg + '</td>  <td class="tdthreeline">60-100</td>  <td class="tdfourline">次/m</td> <td class="tdfiveline">您的心率低於正常範圍</td>    <td class="tdsixline"></td>   <td class="tdsevenline"></td>  <td class="tdeightline"></td>  <td class="tdnineline"></td>';
                    var trObjimg = document.createElement("tr");
                    trObjimg.innerHTML = ' <td colspan="9"><img src="' + obj.rows[i].JSON_ecgxy + '" style="margin-left:-30px;" /></td>';
                    $('#tbheartrates').append(trObjs);
                    $('#tbheartrates').append(trObjimg);
                }
            }
        });
    }