zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Leetcode424. 替换后的最长重复字符
    Leetcode82. 删除排序链表中的重复元素 II
    python 无序模块,hashlib模块
    python 内置方法
    python 面向对象的三大特性
    python 面向对象
    python 递归函数和二分查找
    python 装饰器
    python 函数名,闭包
    python 函数进阶
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3252191.html
Copyright © 2011-2022 走看看