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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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
4.与数据库的连接
2006/10/09 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
jQuery菜单插件用法实例
2015/07/25 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python何时应该使用Lambda函数
2019/07/02 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
职工运动会感言
2014/02/07 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
法律六进活动方案
2014/03/13 职场文书
交流会主持词
2015/07/02 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python