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文件优化
Dec 08 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
js实现小星星游戏
Mar 23 Javascript
vue下载二进制流图片操作
Oct 26 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
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
使用js检测浏览器的实现代码
2013/05/14 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
echarts整合多个类似option的方法实例
2018/07/10 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
管道维修工岗位职责
2013/12/27 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
生日宴会主持词
2014/03/20 职场文书
服务承诺书范文
2014/05/19 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
教师个人考察材料
2014/12/16 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python