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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
vue文件运行的方法教学
Feb 12 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
vue实现登录功能
Dec 31 Vue.js
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年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
js实现选项卡效果
2020/03/07 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
运动会通讯稿150字
2014/02/15 职场文书
学校评语大全
2014/05/06 职场文书
小学优秀教师材料
2014/12/15 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
少年犯观后感
2015/06/11 职场文书
务工证明怎么写
2015/06/18 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers