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生成为第二个表格):

时间: 2024-08-03 18:39:23

jQuery Table2CSV插件(表格转CSV) 完美支持colspan和rowspan的相关文章

jQuery placeholder插件 让IE也能够支持placeholder属性

jQuery placeholder插件 让IE也能够支持placeholder属性 案例:整搜索框,需要默认占位符为“请输入关键词”,获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位.这种代码我想前端们已经很容易就写出来了吧,现在HTML5原生就有这个“placeholder”属性,效果与上边案例描述的一样(各支持的浏览器内部表现可能不一致,但是作用是一致的),那么这一属性该怎么优雅降级到支持所有现代浏览器呢?答案还是脚本即JavaScr

jquery星级插件、支持页面中多次使用

我从网上收集一个jquery星级插件的,它只支持一个页面中使用一次,多次使用的话会发生冲突,达不到我项目的需求,没办法,只能修改它, 效果图如下: css所需背景图片:   二话不说,帖代码: html代码 <div class="xing"> <span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font&

基于jQuery幻灯片插件SkitterSlideshow

分享一款基于jQuery幻灯片插件SkitterSlideshow是一款支持38种不同的幻灯片过渡动画效果,以及两种不同类型的导航按钮,并且它提供了大量的配置参数用于控制幻灯片的显示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div id="page"> <div id="content"> <div class=

使用jQuery.form插件,实现完美的表单异步提交

示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form.js 官网. 通过该插件,我们可以非常简单的实现表单的异步提交,并实现文件上传.进度条显示等等. 现在我们从一个ASP.NET同步表单提交开始,然后再将其转化为异步的表单提交.我写了3种表单提交示例,并简单分析了各种方式的利弊. 当然主题还是使用jQuery表单插件轻松实现表单异步提交以及分析下该插件的源码. ASP.NET服务

AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件

AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js 你可以在右键点击上面的地址,然后选择另存为把JS文件保存到本地. 英文原文地址:http://osvaldas.info/audio-player

jquery.dataTables插件使用例子详解

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jquery.dataTables插件</title>     <link rel

jQuery提示插件alertify使用指南!

jQuery提示插件alertify使用指南 alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括"确定"和"取消"按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两

jquery日历插件(2)

链接jQuery日历插件编写 js:jquery.calendar-1.0.0.js名称请不要更改 改进: 1.改进了调用方式,使用更加方便. 2.支持导入皮肤库,具体导入方法可以参考源码中的Calendar.loadCSS()方法. 如果要自定义皮肤,可以参考源码文件方式,在skin包中新增一个皮肤文件夹,然后参考其他皮肤文件夹中的style.css修改,这个如果是自定义皮肤调用的话就是: jQuery对象.showCalendar({skin:'自定义皮肤文件夹名称'}); js文件请放到与

Jquery遮罩插件,想罩哪就罩哪!

原文:Jquery遮罩插件,想罩哪就罩哪! 一  前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能如下 1 可以全屏遮 用于提交数据时 2  局部遮,用于重复提交,只遮提交按钮,此功能当时在CSDN的登录中看到过,当时觉得还不错 3  遮罩上的提示文字可自己配置,因为操作的业务场景不一样,提示的信息肯定也会不一样 4  遮罩图片可配置, 5 信息提示层大小可配置 大致功能就如上几点,然后就是折