JSON数据和html表格的互相转换

注意：

这个代码只对表头在第一行的表格有效
这里的angular.element()就是取jQuery对象，写成$()是一样的，注意引入jquery
这里的angular.forEach()和forEach()方法是一样的
json转成html没有合并行，最后给出了第一列的合并方法，后期再修改。

// table_id：需要转化成json的表格id，返回json数组function htmlToJson(table_id){var table = angular.element('#'+table_id);var data = [];if(!table.length){return data;}var vtable = table.clone();var thead = [];// 这里表头如果是用的td可以在find里面写成 tr:first-child tdangular.forEach(vtable.find('th'),function(value,index){thead.push(value.innerHTML)});// 补全表格，去除rowspan colspanangular.forEach(vtable.find('tr'),function(trv,tri){angular.forEach(angular.element(trv).children(),function(tdv,tdi){if(tdv.getAttribute('rowspan')){var rowspan = parseInt(tdv.getAttribute('rowspan')) || 1;tdv.removeAttribute('rowspan');var current_tr = angular.element(trv);var rowspan_node = null;while (rowspan > 1) {rowspan_node = angular.element(tdv).clone();current_tr.next().children().eq(tdi).before(rowspan_node);current_tr = current_tr.next();rowspan--;}}if(tdv.getAttribute('colspan')){var colspan = parseInt(tdv.getAttribute('colspan')) || 1;tdv.removeAttribute('colspan');var colspan_node = null;while (colspan > 1) {colspan_node = angular.element(tdv).clone();angular.element(tdv).after(colspan_node);colspan--;}}});});// 获取表格数据json数组angular.forEach(vtable.find('tr'), function (trv, tri) {var row_data = {};angular.forEach(angular.element(trv).children(), function (tdv, tdi) {row_data[thead[tdi]] = tdv.innerText;});data.push(row_data);});// 假设第一行是表头return data.slice(1);}// data：需要转化成html表格的json数组，返回生成的table节点function jsonToHtml(data){var thead = '';angular.forEach(Object.keys(data[0]),function(value,index){thead += "<th>" + value + "</th>"});thead = "<tr>" + thead + "</tr>";var row = "";var tbody = '';angular.forEach(data, function (value, index) {row = "";angular.forEach(Object.keys(value), function (v, i) {row += "<td>" + value[v] + "</td>";});row = "<tr>" + row + "</tr>";tbody += row;});var table = document.createElement('table');table.innerHTML = thead + tbody;return table;}
// 对第一列合并相同项，传入table里面的字符串对象，返回合并后的字符串对象（今天搞得太晚了，还真是朝9晚9的生活啊，先吃完饭在来优化吧，饿的了脑子飞了）
function firstColMerge(str) {var table = document.createElement('table');table.innerHTML = str;$scope.table = angular.element(table);var rowspan = 1;var last_td = document.createElement('td');angular.forEach($scope.table.find('tr td:first-child'), function (value, key) {if (last_td.innerHTML === value.innerHTML) {value.style.display = "none";rowspan++;last_td.setAttribute("rowspan", rowspan);} else {last_td = value;rowspan = 1;}});return $scope.table.html();}

JSON数据和html表格的互相转换相关推荐

Python：json数据与Python对象之间的转换
json数据与Python对象之间的转换 1.前面介绍了在Python中如何处理json数据,主要使用了以下几个方法 ⑴dumps():将Python对象转换为JSON格式的字符串 ⑵ ...
excel两个表格数据对比_vue实现json数据导出Excel表格
因为项目的需要, 需要从前端导出表格,今天一个坑踩了一个小时,特别分享给大家 Vue导出json数据到Excel表格一,安装依赖(三个缺一不可) npm install file-saver --s ...
Python爬虫项目：爬取JSON数据存储Excel表格与存储图片
随着网络的迅速发展,万维网成为大量信息的载体,如何有效地提取并利用这些信息成为一个巨大的挑战.搜索引擎(Search Engine),例如传统的通用搜索引擎AltaVista,Yahoo!和Googl ...
如何在线快速把json数据转excel表格
工作中经常会遇到需要把json转成可视化的结构数据,例如excel,否则json数据根本没法阅读,本人工作中之前是把微信好友转出来是json格式,需要转成excel才能方便阅读,这里推荐一个在线转js ...
vue 渲染JSON数据动态生成表格组件
vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template><div id="viewDialog"><el-button typ ...
JSON数据和JAVA对象之间的转换
方法1: 利用阿里巴巴开源的fastjson包进行JAVA对象和JSON字符串进行转换. C++中的结构体在JAVA中用对象表示,目录结构如下: Peron类内容如下,对应C++中的Person结构体 ...
JS中将 JSON 数据转换为 Excel 表格的详细步骤如下：
工作中后端那为兄弟用java把execl的数据转为json格式发我了,他问我能不能用js把josn在转为execl格式然后我就开始了项目地址下载 xlsx 库在使用 xlsx 库之前, ...
『解疑』前端通过json数据导出excel表格文件（支持多级表头、复杂表头）（json转excel）
问题如何友好的通过规范的json数据导出成excel文件. 解题制定规范的json数据结构: ( 只要将现有的数据处理成以下格式即可导出 ) {headerList: [ // 多级表头(2选1即 ...
vue中导出json数据为excel表格并保存到本地
继我上次成功利用vue和elemen把excel的数据导入至前端vue,因为excel表中的数据有些必填项没有填写或者填写错误(比如写错字)所以就要将没有成功导入的数据导出成一份excel表并保存至本 ...

JSON数据和html表格的互相转换

JSON数据和html表格的互相转换相关推荐

最新文章

热门文章