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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
jquery分割字符串的方法
Jun 24 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
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使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
js实现DIV的一些简单控制
2007/06/04 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python中matplotlib中文乱码解决办法
2017/05/12 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
关于Keras Dense层整理
2020/05/21 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
幼儿园老师新年寄语2015
2014/12/08 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python