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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
javascript preload&amp;lazy load
May 13 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
jquery不常用方法汇总
Jul 26 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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
帅气的琦玉老师
2020/03/02 日漫
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python实现图片添加文字
2019/11/26 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
七年级地理教学反思
2014/01/26 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
教师节寄语2015
2015/03/23 职场文书
四风之害观后感
2015/06/09 职场文书
刘胡兰观后感
2015/06/16 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
在pyCharm中下载第三方库的方法
2021/04/18 Python
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技