• 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的数据 www.jbxue.com 
    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>
  • 相关阅读:
    Mvc Tree的简单应用
    nodeJs的学习之路(1)
    AngularJs基础学习指南(1)
    前端工程化讲解
    前端性能优化--为什么DOM操作慢?
    This package contains perl-5.16.3, java8, nifi-1.1.2 on ubuntu:14.04
    This package contains sshd, pcal, mysql-client on Ubuntu14:04
    This package contains mysql-server on ubuntu:14.04
    NIFI-创建一个FlowFile并利用PutFile保存到到指定目录
    NIFI如何利用eclipse开发自己的Processor(下)
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3252191.html
Copyright © 2020-2023  润新知