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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
PHP7新特性简述
Jun 11 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 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 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
帝国cms目录结构分享
2015/07/06 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
详解python之heapq模块及排序操作
2019/04/04 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
python 实现矩阵按对角线打印
2019/11/29 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
python实现处理mysql结果输出方式
2020/04/09 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
求职信格式范本
2013/11/15 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
高中军训感言600字
2014/03/11 职场文书
感恩之星事迹材料
2014/05/03 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python