首页 > 编程 > JavaScript > 正文

JavaScript动态添加列的方法

2019-11-20 12:51:56
字体:
来源:转载
供稿:网友

本文实例讲述了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程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表