JavaScript动态添加列的方法


Posted in Javascript onMarch 25, 2015

本文实例讲述了JavaScript动态添加列的方法。分享给大家供大家参考。具体实现方法如下:

/*** 
 * 动态添加table 列 
 * @param result 
 */ 
function addRow(resultJson){ 
/* var temp = []; 
 temp = $.grep(arr, function(val, key) { 
  if(val.indexOf('c') != -1) 
   return true; 
// 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素 
// 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素 
 }, false); 
 console.dir(temp); 
 */ 
 if(resultJson!=""){ 
   var cv_arr=new Array(); 
   var date_arr = new Array(); 
//将数据源解析,并解析成程序可认的date及result 
   $.each(resultJson, function(index, val) { 
    if(val['parser_schedule']!=null){ 
     cv_arr.push(val['parser_schedule']); 
     var temp_data =val['parser_schedule'].split(","); 
     for(i=0;i<temp_data.length;i++){ 
      var temp = temp_data[i].split(":"); 
      date_arr.push(temp[0]); 
     } 
    } 
   }); 
   date_arr = unique(date_arr); 
  date_arr.in_arr = function(value) { 
   var a = this;
   //为了增加方法扩展适应性。我这稍微修改了下 
   for (var i = 0; i < a.length; i++) { 
    if (a[i] == value) 
     return i; 
   } 
  } 
  //ARR下标值从0开始 
  var old_td_n = $("#mytable thead tr").find("th").length;
  //获取已有的TH 
  //设置TH信息 
  for(i=0;i<date_arr.length;i++){ 
   //注意TH和TD,样式不一样 
   $("#mytable thead tr").append("<th>"+date_arr[i]+"</th>"); 
   $("#mytable tbody tr").append("<td>-</td>"); 
  } 
  var rowNum_arr=new Array(); 
  //获取一共有多少行 
  for(i=0;i<$("#mytable").find("tr").length;i++){ 
//获取每一行中第三列的值,table前两列隐藏,第三列开始判断是否有数据 
   var str=$("#mytable tbody").find("tr").eq(i); 
   var std=str.find("td").eq(2); 
   //当没有值的时候记录,获取行号 
   if($.trim(std.text()).length <1){ 
    rowNum_arr.push(i); 
   }else{ 
  //  $(std).html(""); 
   } 
  } 
  //设置TD信息 
  for(i=0;i<cv_arr.length;i++){ 
   //获取RESULT_ARR中的日期数据 
   var temp_str = cv_arr[i];//OK 
   //将日期数据用","分割成数组 
   var temp_arr = temp_str.split(",");//OK [03-11:10,03-12:9,03-13:8,03-14:15] 
   for(j=0;j<temp_arr.length;j++){ 
    //获取数据集 为字符串例如03-11:10 
    var temp_result = temp_arr[j]; 
    /* 
     将数据集分割为数组[03-11:10] 
     ARR[0] 03-11 
     ARR[1] 10 
    */ 
    var temp_result_arr = temp_result.split(":");
    //设置第I行的TR里的内容 
    $("#mytable tbody").find("tr").eq(rowNum_arr[i]).find("td").eq(old_td_n+date_arr.in_arr(temp_result_arr[0])).html(temp_result_arr[1]);  
    // 应用样式 
    $("#tb tr:even td").addClass("alt");//行的颜色 
    $("#tb tr").find("td:eq(2)").addClass("spec"); 
    $("#tb tr:even").find("td:eq(2)").addClass("specalt"); 
   } 
  } 
 } 
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
vue子路由跳转实现tab选项卡
Jul 24 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
javascript实现复选框选中属性
Mar 25 #Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 #Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 #Javascript
jQuery使用post方法提交数据实例
Mar 25 #Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 #Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 #Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 #Javascript
You might like
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP经典面试题集锦
2015/03/19 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue实现计算器功能
2020/02/22 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python opencv读mp4视频的实例
2018/12/07 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
给领导的致歉信范文
2014/01/13 职场文书
爱心捐款倡议书
2014/04/14 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL