Javascript/jQuery根据页面上表格创建新汇总表格
2015-03-18 17:29
423 查看
任务背景及需求
按页面上的现成表格,用js生成新的统计表格如下:
实现思路
1,把表格数据抽取出来生成json数组
2,计算表格总数并创建空表格
3,历遍json数组把数据动态插入所有的表格,设值/append Row
4,最后配置好所有表格的属性如thead,rowspan等
详细代码
按页面上的现成表格,用js生成新的统计表格如下:
实现思路
1,把表格数据抽取出来生成json数组
2,计算表格总数并创建空表格
3,历遍json数组把数据动态插入所有的表格,设值/append Row
4,最后配置好所有表格的属性如thead,rowspan等
详细代码
/** * @create: nelson * @initBPDTable 初始化表格内容 * @调用方式 $("#main_content").initBPDTable(list); */ $.fn.extend({ //获取listView的数据转化为json数组 getJsonArrFromListView: function (linkCol) { var This = $(this); var keyArr = new Array(), jsonArr = new Array(); This.find("thead th").each(function () { keyArr.push($(this).text().trim()); }); This.find("tbody tr").each(function () { var jsonObj = {}; $(this).find("td").each(function (n) { if (n != linkCol) { jsonObj[keyArr ] = $(this).text().trim(); } else jsonObj[keyArr ] = $(this).find("a").attr("href"); }); jsonArr.push(jsonObj); }); return jsonArr; }, initBPDTable: function (list) { var This = $(this), $list = $(list); var keyArr = new Array(), jsonArr = new Array(), yearArr = new Array(); jsonArr = $list.getJsonArrFromListView(3); //计算起始年份 var startYear = (function (jsonArr) { var result = 2000; $.each(jsonArr, function (entryIndex, entry) { var temp = Number(entry['CY']); if (temp > result) { result = temp; } }); return result - 4; })(jsonArr); //构建表格 (function (jsonArr, startYear) { var tableTpl = '<table class="itm_table"><thead><tr><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody><tr class="odd"><td rowspan="1">{tableTitle}</td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>'; var configs = { titleArr: new Array(), col: 5, strHtml: "", targetJsonArr: new Array(), tLength: function () { return this.titleArr.length; } }; $.each(jsonArr, function (entryIndex, entry) { for (var i = 0; i < 5; i++) { if (entry['CY'] == startYear + i) { configs.targetJsonArr.push(entry); var title = entry['Project Type']; if (configs.titleArr.length == 0) { configs.titleArr.push(title); } else { var newTitleFlag = true; for (var j = 0; j < configs.titleArr.length; j++) { if (configs.titleArr[j] == title) { newTitleFlag = false; break; } } if (newTitleFlag) { configs.titleArr.push(title); } } } } }); //生成空表格 for (var i = 0; i < configs.tLength(); i++) { configs.strHtml += tableTpl.replace("{tableTitle}", configs.titleArr[i]); } This.html(configs.strHtml); //插入数据 var jArr = configs.targetJsonArr; $.each(jArr, function (entryIndex, entry) { var title = entry['Project Type'], cy = entry['CY'], link = entry['Project Link'], name = entry['Project Name']; for (var i = 0; i < 5; i++) { if (cy == startYear + i) { for (var j = 0; j < configs.tLength(); j++) { if (title == configs.titleArr[j]) { var needAppend = true, isOddRow; This.find(".itm_table:eq(" + j + ")").find("tbody>tr").each(function (n) { var obj = $(this), self = (n == 0) ? obj.find("td:eq(" + (i + 1) + ")") : obj.find("td:eq(" + i + ")"); isOddRow = (obj.attr("class") == "odd"); if (self.html() == "") { self.html('<a href="' + link + '">' + name + '</a>'); needAppend = false; return false; } }); if (needAppend) { var oddTpl = '<tr class="odd"><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>', evenTpl = '<tr class="even"><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>', reg = new RegExp("{\\d{1}}", "g"); if (isOddRow) { This.find(".itm_table:eq(" + j + ")").find("tbody").append(evenTpl.replace('{' + i + '}', '<a href="' + link + '">' + name + '</a>').replace(reg, "")); } else { This.find(".itm_table:eq(" + j + ")").find("tbody").append(oddTpl.replace('{' + i + '}', '<a href="' + link + '">' + name + '</a>').replace(reg, "")); } } } } } } }); //初始化年份显示 This.find(".itm_table:eq(0)").find("thead").html('<tr>' + '<th></th>' + '<th><img src="/images/arrow_red.png" /><span class="cy">CY2014</span></th>' + '<th><img src="/images/arrow_green.png" /><span class="cy">CY2015</span></th>' + '<th><img src="/images/arrow_purple.png" /><span class="cy">CY2016</span></th>' + '<th><img src="/images/arrow_blue.png" /><span class="cy">CY2017</span></th>' + '<th><img src="/images/arrow_orange.png" /><span class="cy">CY2018</span></th>' + '</tr>'); This.find(".itm_table:eq(0)").find(".cy").each(function (n) { yearArr.push((startYear + n).toString()); $(this).text("CY" + yearArr ); }); //初始化行的rowspan This.find(".itm_table").each(function () { var self = $(this); var len = self.find("tbody>tr").length; self.find("tbody>tr:first").find("td:eq(0)").attr("rowspan", len); }); })(jsonArr, startYear); } });
相关文章推荐
- 使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)
- 如何让动态创建的页面元素响应用户事件 (HTML/javascript/jQuery/Ajax/DOM)
- 使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据
- 根据<h*>标签JavaScript/jQuery自动生成文章目录(页面内导航)且平滑跳转
- 使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据
- jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典
- javascript如何创建表格(javascript绘制表格的二种方法)
- 【jquery】javaScript中prototype的妙用 巧妙运用prototype属性原型链创建对象
- jsday07(页面通过按钮打开其他页面 创建删除表格行列)
- JavaScript Web页面表格导出到Word、Excel
- javascript动态创建表格:新增、删除行和列
- 从零开始学_JavaScript_系列(12)——jquery<2>(高度自适应,哈希地址及检测,单页面技术)
- jquery 刷新页面方法和一些javascript基础函数
- 【jQuery插件】autoTextarea-文本框根据输入内容自适应高度的实例页面
- JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
- JavaScript -- 控制table的创建 与 删除, 排序, 表格颜色
- scrollUp.js Javascript/jQuery 页面返回顶部
- asp中javascript或jquery如果在body中 且需要页面元素 则需要放在最后
- javascript 动态创建表格
- Javascript 刷新框架及页面的方法汇总(转)