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 实现TreeView CheckBox全选效果
Jan 11 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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 debug 安装技巧
2011/04/30 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php header函数的常用http头设置
2015/06/25 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python 常用的基础函数
2018/07/10 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python networkx包的实现
2020/02/14 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
serialVersionUID具有什么样的特征
2014/02/20 面试题
群胜软件Java笔试题
2012/09/29 面试题
自我鉴定书范文
2013/10/02 职场文书
销售心得体会
2014/01/02 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
少年闰土教学反思
2014/02/22 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
中秋寄语大全
2014/04/11 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
《三国志》赏析
2019/08/27 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis