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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
vue系列之动态路由详解【原创】
Sep 10 Javascript
在 Vue 中编写 SVG 图标组件的方法
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
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP加密解密类实例代码
2016/07/20 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
flask session组件的使用示例
2018/12/25 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
servlet面试题
2012/08/20 面试题
毕业生求职简历的自我评价
2013/10/23 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
格林童话读书笔记
2015/06/30 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
Java版 简易五子棋小游戏
2022/05/04 Java/Android