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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php析构函数的简单使用说明
2015/08/24 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
php实现等比例压缩图片
2018/07/26 PHP
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python类的动态修改的实例方法
2017/03/24 Python
python机器人行走步数问题的解决
2018/01/29 Python
Python 元类实例解析
2018/04/04 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
单位病假条范文
2015/08/17 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript