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 Demo模态窗口
Dec 06 Javascript
javascript定义函数的方法
Dec 06 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
js同源策略详解
May 21 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
vue中使用props传值的方法
May 08 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
Dedecms常用函数解析
2008/02/01 PHP
第六章 php目录与文件操作
2011/12/30 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
浅谈json_encode用法
2015/03/05 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
详解vue项目构建与实战
2017/06/27 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
员工工作表扬信范文
2014/01/13 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
党组织公开承诺书
2014/03/29 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
毕业生应聘求职信
2014/07/10 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书