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循环改变div颜色具体方法
Jun 25 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 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实现mysql数据库备份类
2008/03/20 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python mysql中in参数化说明
2020/06/05 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
小区门卫工作职责
2013/12/14 职场文书
保密普查工作实施方案
2014/02/25 职场文书
工会换届选举方案
2014/05/21 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
中秋晚会致辞
2015/07/31 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
如何通过一篇文章了解Python中的生成器
2022/04/02 Python