jQuery Table2CSV插件(表格转CSV) 完美支持colspan和rowspan
table2csv:将表格转化为csv数据
参数:一个JSON对象
{
'repeatChar':'拆分单元格填充字符', //默认为null则将单元格值填充到拆分的每个单元格中,如果给定字符串则用给定字符串填充
'callback':'回调函数' //传入两个参数(csv,data),分别为csv字符串和data二维数组
}
(function($){
$.fn.table2csv=function(option){
if(option==null) option={};
if(option.repeatChar=='') option.repeatChar="-";
//计算行数列数
var rows=0; //行
var cols=0; //列
this.find("tr").each(function(){
rows+=1;
var tr=$(this);
var n=tr.find("td,th").length;
cols=Math.max(cols,n);
});
//document.title=("行/列:"+rows+"/"+cols);
//空数组准备
var data=new Array();
for(var i=0;i<rows;i++){
var line=new Array();
for(var j=0;j<cols;j++)
line.push('');
data.push(line);
}
//数据填充
var i=0;//当前行坐标
this.find("tr").each(function(){
var tr=$(this);
var j=0;//当前列坐标
tr.find("td,th").each(function(){
var td=$(this);
var colspan=1;
var rowspan=1;
var value=td.text();
if(td.attr("colspan")!=null) colspan=parseInt(td.attr("colspan"));
if(td.attr("rowspan")!=null) rowspan=parseInt(td.attr("rowspan"));
//定位CSV数组中第一个没有数据的单元格
for(var p=0;p<data[i].length;p++){
if(data[i][p]==''){ j=p; break; }
}
data[i][j]=value;//填充值
if(colspan+rowspan==2) return; //如果不是合并单元格,返回并继续each
//填充单元格区域
var fic=i+rowspan; //alert(value+i+":"+j);
for(var fi=i;fi<fic;fi++){
var fjc=j+colspan; //alert(""+j+"\r\n"+fic+":"+fjc);
for(var fj=j;fj<fjc;fj++){
if((fj==j)&&(fi==i)) continue;
data[fi][fj]= (option.repeatChar==null)? value :option.repeatChar; //alert(test(data));
}
}
});
i++;
});
//填充完毕
//生成调试数据
var str="";
for(var i in data){
str+=data[i].join(",");
str+="\r\n";
}
if(option.callback!=null) option.callback(str,data);
};
/////////////////////////////////
$.fn.csv2table=function(param){
var isarray=param instanceof Array;
var data=null;
if(isarray)//数组直接用
data=param;
else{//csv字符串则转为数组
data=new Array();
var lines=param.split('\r\n');
for(var i=0;i<lines.length;i++){
var cells=lines[i].split(',');
data.push(cells);
}
}
var table="<table border='1'>";
for(var i=0;i<data.length;i++){
table+="<tr>";
var cells=data[i];
for(var j=0;j<cells.length;j++)
table+=("<td>"+cells[j]+"</td>");
table+="</tr>";
}
table+="</table>";
table+=(isarray?"<!--数组-->":"<!--字串-->");
this.html(table);
}
})(jQuery);
测试界面(将表格中的内容转为csv,然后再将csv生成为第二个表格):

jQuery Table2CSV插件(表格转CSV) 完美支持colspan和rowspan的更多相关文章
- JS table内容转成二维数组,支持colspan和rowspan
思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组 说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...
- 推荐10款 好用的 Jquery 评分插件
Raty jQuery Raty这是一个能够自动生成可定制的星级评分jQuery插件.可以自定义图标,创建各种评级组合,星星数量,每一颗星星的注释,可以在当一个星星被点击时的加回调函数. 地址: Ra ...
- jquery水印插件:placeholder
jquery水印插件:placeholder 有的浏览器支持html5的水印placeholder(如Crome,firefox,ie10+),有的不支持html5的placeholder(ie9,i ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- Perfect Scrollbar – 完美的 jQuery 滚动条插件
Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...
- AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件
AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...
- jquery银行电子账单表格填入和编辑插件
jquery银行电子账单表格填入和编辑 前段时间做的一个银行表格账单的jquery插件,用于金额写入和编辑的应用,希望对大家有所帮助,发现问题欢迎回复 ;(function($){ function ...
- 15 个最佳的 jQuery 布局插件【转】
英文原文:15 Best jQuery Grid Plugins for Developers 现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
随机推荐
- SpringMVC日期参数自动绑定
Controller: @RequestMapping("/addUser") public String addUser(User user) { ... } Model: pu ...
- [iOS基础控件 - 6.1] 汽车品牌列表 UITableView多项显示
A.实现思路 1.拖入UITableView 2.拖曳.连线UITableView控件 3.Controller遵守UITalbeViewDataSource协议 4.设置UITableView的da ...
- 在高版本SDK中打开现存低版本SDK工程
直接打开低版本SDK工程会出现错误提示:“Unable to resolve target 'android-xx” 解决方法: 1.将project.properties文件中的“target=an ...
- 高性能javascript
高性能javascript开发 标签(空格分隔): javascript DOM访问与修改 访问DOM元素是具有代价的,修改元素代价较为昂贵,会导致浏览器重新计算页面的几何变化. 尽量减少DOM访问, ...
- zxing 生成二维码
一.zxing介绍 zxing是google提供生成.解析一维码.二维码的开源库. 二.使用 2.1 maven pom 配置 <dependency> <groupId>co ...
- Android设计模式系列-组合模式
Android中对组合模式的应用,可谓是泛滥成粥,随处可见,那就是View和ViewGroup类的使用.在android UI设计,几乎所有的widget和布局类都依靠这两个类.组合模式,Compos ...
- hdu 5445 Food Problem 多重背包
Food Problem Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5 ...
- 2013 ACM/ICPC Asia Regional Changsha Online J Candies
AC了,但是不知道为什么,但是恶心的不得了~最近写代码,思路都非常清晰,但是代码各种bug~T.T~说说思路吧:二分~330ms~ 小队友fribbi的思路是离线250msAC~ 预处理solve函数 ...
- 【Android】Activity遮罩效果的实现
Activity文件 package com.app.test02; import android.app.Activity; import android.graphics.Color; impor ...
- Java基础知识强化100:JVM 内存模型
一. JVM内存模型总体架构图: 方法区和堆由所有线程共享,其他区域都是线程私有的 二. JVM内存模型的结构分析: 1. 类装载器(classLoader) 类装载器,它是在java虚拟机中用途是 ...