首页 > web前端 > js教程 > 正文

JavaScript动态添加列的方法_javascript技巧

php中文网
发布: 2016-05-16 16:07:36
原创
1524人浏览过

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

e网企业2.0
e网企业2.0

一款适用于中小企业自助建站程序,是c#与xml技术相结合的产物,支持动态设定二级栏目,采用了开放式架构,建站模版自由添加。程序整合了(单一文本,新闻列表,图片列表 ,在线订单, 文件下载 , 留言板)六类插件,以所见即所得的方式,将烦锁的建站过程简化到三步,使用户可以轻松上手。 管理后台:manage.aspx 初始密码均为admin

e网企业2.0 0
查看详情 e网企业2.0
相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号