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闭包的理解和实例
Aug 12 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
Vue快速实现通用表单验证的方法
Feb 24 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
php 操作调试的方法
2012/07/12 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python中数据库like模糊查询方式
2020/03/02 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
委托函范文
2015/01/29 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书