JS动态创建Table,Tr,Td并赋值的具体实现

时间:2024-04-10 11:02:39 

成果库修改:
      要求主题列表随成果类型改变而改变
      网上查询资料后开工,在成果类型下拉框添加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>
标签:创建,Table,赋值
0
投稿

猜你喜欢

  • vue实现页面添加水印

    2024-05-10 14:19:59
  • Python中免验证跳转到内容页的实例代码

    2021-03-27 11:19:55
  • cordova+vue+webapp使用html5获取地理位置的方法

    2024-04-27 16:00:05
  • PHP易混淆知识整理笔记

    2023-06-10 04:34:22
  • Python利用Scrapy框架爬取豆瓣电影示例

    2022-04-30 15:16:17
  • 用户体验的时间尺度[译]

    2009-10-30 18:25:00
  • python随机生成大小写字母数字混合密码(仅20行代码)

    2021-04-03 23:28:47
  • python密码学RSA算法及秘钥创建教程

    2022-03-20 04:02:34
  • Python列表切片常用操作实例解析

    2023-12-18 03:47:54
  • perl生成特定碱基比例的随机序列的代码

    2023-12-08 05:27:07
  • 使用Python爬虫爬取小红书完完整整的全过程

    2022-03-23 05:12:44
  • Vue组件的使用及个人理解与介绍

    2024-05-09 15:13:52
  • php进程daemon化的正确实现方法

    2023-10-01 09:14:09
  • Python入门教程(十)Python布尔值介绍

    2022-06-01 18:01:55
  • Javascript遍历Html Table示例(包括内容和属性值)

    2024-05-22 10:40:53
  • 社会化音乐:在夹缝中生出花来

    2009-08-24 12:37:00
  • mysql时间相减如何获取秒值

    2024-01-19 17:04:10
  • JavaScript实现网页动态生成表格

    2024-04-16 09:24:00
  • python遍历迭代器自动链式处理数据的实例代码

    2022-04-12 18:38:29
  • IE window对象介绍

    2008-05-21 18:47:00
  • asp之家 网络编程 m.aspxhome.com