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


Posted in Javascript onJuly 05, 2013

成果库修改:
      要求主题列表随成果类型改变而改变
      网上查询资料后开工,在成果类型下拉框添加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>
Javascript 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 #Javascript
javascript实现跳转菜单的具体方法
Jul 05 #Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 #Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 #Javascript
JS 精确统计网站访问量的实例代码
Jul 05 #Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 #Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 #Javascript
You might like
php mysql数据库操作分页类
2008/06/04 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
详解vue axios中文文档
2017/09/12 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python 求数组局部最大值的实例
2019/11/26 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
影视艺术学院毕业生自荐信
2013/11/13 职场文书
小学生期末评语大全
2014/04/21 职场文书
集中整治工作方案
2014/05/01 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
Redis 哨兵机制及配置实现
2022/03/25 Redis