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

 更新时间:2013年07月05日 17:28:27   作者:  
这篇文章介绍了JS动态创建Table,Tr,Td并赋值的具体实现,有需要的朋友可以参考一下
成果库修改:
      要求主题列表随成果类型改变而改变
      网上查询资料后开工,在成果类型下拉框添加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>

相关文章

  • js实现继承的方法及优缺点总结

    js实现继承的方法及优缺点总结

    这篇文章主要给大家介绍了关于js实现继承的方法及优缺点的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • javascript实现小型区块链功能

    javascript实现小型区块链功能

    这篇文章主要介绍了javascript实现小型区块链功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 客户端js性能优化小技巧整理

    客户端js性能优化小技巧整理

    说起javascript无人不知无人不晓吧,下面是一些关于客户端JS性能的一些优化的小技巧,希望对大家有所帮助
    2013-11-11
  • 一个不错的仿携程自定义数据下拉选择select

    一个不错的仿携程自定义数据下拉选择select

    这是一个仿携程自定义的数据下拉选择select,对一些比较重要的参数进行的描述,方便初学者
    2014-09-09
  • JavaScript设计模式之单体模式全面解析

    JavaScript设计模式之单体模式全面解析

    单体模式可以说是javascript中最基本也是最有用的模式之一,接下来通过本文给大家解析js设计模式之单体模式,非常不错,感兴趣的朋友一起看看吧
    2016-09-09
  • 基于javascript实现图片左右切换效果

    基于javascript实现图片左右切换效果

    这篇文章主要为大家介绍了基于javascript实现图片左右切换效果,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 深入理解选择框脚本[推荐]

    深入理解选择框脚本[推荐]

    选择框是通过<select>和<option>元素创建的,又称为下拉列表框。为了方便与这个控件交互,除了所有表单字段共有的属性和方法外,javascript还提供了一些属性和方法。本文将详细介绍选择框脚本
    2016-12-12
  • JS如何修改对象数组的key值

    JS如何修改对象数组的key值

    这篇文章主要介绍了JS如何修改对象数组的key值,使用map循环,在map循环内创建一个新对象,将item要改变的key赋给新创建的对象里面新key值,然后push给一个新创建的数组dataNew即可,需要的朋友可以参考下
    2024-02-02
  • js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口,不弹出提示框。支持ie6+,火狐,谷歌等浏览器,下面以一个示例为大家详细介绍下具体的实现方法,感兴趣的朋友可以参考下
    2013-09-09
  • Three.JS实现三维场景

    Three.JS实现三维场景

    这篇文章主要为大家详细介绍了Three.JS实现三维场景,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12

最新评论