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 树控件 比较好用
Jun 11 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
VUE重点问题总结
Mar 19 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
原生JS实现烟花效果
Mar 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创建多级目录代码
2008/06/05 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
jQuery实现增删改查
2020/12/22 jQuery
Python探索之ModelForm代码详解
2017/10/26 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
如何用python处理excel表格
2020/06/09 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
精选干货:Java精选笔试题附答案
2014/01/18 面试题
网吧消防安全制度
2014/01/28 职场文书
小学生成长感言
2014/01/30 职场文书
小班下学期评语
2014/05/04 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
催款函怎么写
2015/06/24 职场文书
Python 绘制多因子柱状图
2022/05/11 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript