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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
jquery实用代码片段集合
Aug 12 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 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 小乘法表实现代码
2009/07/16 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
php桥接模式应用案例分析
2019/10/23 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
关于this和self的使用说明
2010/08/01 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python中的变量和作用域详解
2016/07/13 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
迪奥官网:Dior.com
2018/12/04 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫