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 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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/11/18 PHP
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python读取键盘输入的2种方法
2015/06/16 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python第三方库学习笔记
2020/02/07 Python
python递归函数用法详解
2020/10/26 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
会计岗位职责模板
2014/03/12 职场文书
优秀广告词大全
2014/03/19 职场文书
重阳节活动总结
2014/08/27 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
白鹤梁导游词
2015/02/06 职场文书
工作推荐信模板
2015/03/25 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
详解Redis实现限流的三种方式
2021/04/27 Redis