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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 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购物车实现代码
2011/10/10 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
python 提取文件的小程序
2009/07/29 Python
深入解析Python中的WSGI接口
2015/05/11 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python 贪心算法的实现
2020/09/18 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
信息部岗位职责
2013/11/12 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
妈妈活动方案
2014/08/15 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
《认识年月日》教学反思
2016/02/19 职场文书