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 tab 选项卡
Apr 26 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
Koa日志中间件封装开发详解
Mar 09 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python版本的仿windows计划任务工具
2018/04/30 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
PyTorch实现AlexNet示例
2020/01/14 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
临床医学大学生求职信
2013/09/28 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
什么是SOLID
2022/03/24 Javascript
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫