JavaScript动态添加列的方法

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

赞 (0)

相关推荐

  • javascript如何动态加载表格与动态添加表格行

    一.动态加载表格 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部.如下 <div id="tdl"><div> 2.在javascript中写添加表格的语句 若在当前html文件中,则写在<script>标签内部,如 复制代码 代码如下: <script type="text/javascript" > document.getElement

  • JavaScript动态操作表格实例(添加,删除行,列及单元格)

    复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js动态操作表格</title><script language="javascript">function init(){_table=document.getElementByI

  • JavaScript动态改变HTML页面元素例如添加或删除

    可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht

  • javascript动态向网页中添加表格实现代码

    javascript动态向网页中添加表格实现代码

    //此段代码在IE9.Firefox.Chorme.safair中测试显示没有问题,给该表格添加了一些简单的样式,基本功能可以实现,还有少量问题有待改进! 效果图如下:  以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

  • javascript动态添加样式(行内式/嵌入式/外链式等规则)

    添加CSS的方式有行内式.嵌入式.外链式.导入式 a)动态引入样式表文件: 复制代码 代码如下: function loadLink(url){ var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; var head = document.getElmentsByTagName(&qu

  • javascript动态添加、修改、删除对象的属性与方法详解

    现在介绍如何为一个对象添加.修改或者删除属性和方法.在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加.修改.删除属性和方法.例如首先使用类Object来创建一个空对象user:var user=new Object(); 1．添加属性这时user 对象没有任何属性和方法,显然没有任何用途.但可以为它动态的添加属性和方法,例如:user

  • JavaScript实现向OL列表内动态添加LI元素的方法

    本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my

  • Javascript实现动态菜单添加的实例代码

    Javascript实现动态菜单添加的实例代码

    先来看看效果: Html源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <

  • javascript为下拉列表动态添加数据项

    javascript为下拉列表添加数据项.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>为下拉列表动态添加数据项<

  • JavaScript动态添加列的方法

    本文实例讲述了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只收集回调函

  • javascript动态添加删除tabs标签的方法

    本文实例讲述了javascript动态添加删除tabs标签的方法.分享给大家供大家参考.具体实现方法如下: <html> <HEAD> <TITLE>网页对话</TITLE> <LINK href="style.css" type=text/css rel=stylesheet> <script> function $(obj) { var o = typeof(obj)=="object" ?

  • jQuery实现表格行和列的动态添加与删除方法【测试可用】

    jQuery实现表格行和列的动态添加与删除方法【测试可用】

    本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • C#中GridView动态添加列的实现方法

    本文实例讲述了C#中GridView动态添加列的实现方法.分享给大家供大家参考.具体如下: protected void Page_Load(object sender, EventArgs e) { TemplateField mycustomField = new TemplateField(); //创建列实例 mycustomField.ShowHeader = true; // 设置属性 LinkButton lb = new LinkButton(); lb.Text = "Dele

  • C#中DataGridView动态添加行及添加列的方法

    本文实例讲述了C#中DataGridView动态添加行及添加列的方法.分享给大家供大家参考.具体如下: Datagridview添加列: DataGridViewTextBoxColumn acCode = new DataGridViewTextBoxColumn(); acCode.Name = "acCode"; acCode.DataPropertyName = "acCode"; acCode.HeaderText = "A/C Code&quo

  • JavaScript动态添加style节点的方法

    本文实例讲述了JavaScript动态添加style节点的方法.分享给大家供大家参考.具体如下: var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if(style.styleSheet){ style.styleSheet.cssText =

  • Javascript 创建类并动态添加属性及方法的简单实现

    JavaScript 是一种很强的面向对象的语言,支持创建实例之后再添加属性和方法,虽然是小技巧,用的时候容易忘记,今天写了一个很小的例子,记录在这里,仅供参考. function MyClass() { //This function is same as a constructer alert("New Object Created"); } //Creating Object var MyObject = new MyClass (); NewObject.prototype =

  • javascript的document中的动态添加标签实现方法

    document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScript <script type="text/javascript"> function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.inne

  • javascript动态添加表格数据行(ASP后台数据库保存例子)

    javascript动态添加表格数据行(ASP后台数据库保存例子)

    在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方.比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种不是以单独页面的形式添加,这种动态添加是在同一个页面下动态添加,最后再一起提交到服务器保存到数据库中. 本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子. 浏览器:IE.6.0 后台:ASP (VBScript ) 前台:HTML + JavaScript HTML代码: 复

  • AngularJS实现动态添加Option的方法

    AngularJS实现动态添加Option的方法

    本文实例讲述了AngularJS实现动态添加Option的方法.分享给大家供大家参考,具体如下: 项目中后台管理设置,前台下拉动态添加option <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&q

随机推荐