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

來源:互聯網
上載者:User

成果庫修改:
      要求主題列表隨成果類型改變而改變
      網上查詢資料後開工,在成果類型下拉框添加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' 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>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.