让table变成exls的示例代码_jquery

// 根据网上前辈的脚本改了一下，添加了一些功能，也许对初学者有些帮助 <br>//这个脚本就是个装饰作用,对原生的table支持，不过不支持table有其它元素 <br>(function ($) { <br>$.fn.ManualTable = function (options) { <br>var tabid = $(this).attr("id"); <br>var lineMove = false; <br>var currTh = null; <br>var opts = $.extend({}, $.fn.ManualTable.defaults, options); <br><br>$(this).css({ <br>"*border-collapse": "collapse", <br>"border-spacing": 0, <br>"width": "100%", <br>"border": "solid " + opts.BorderColor + " 1px", <br>"font-size": opts.TableFontSize <br>}); <br>$("#" + tabid + " th").css({ <br>"background": opts.ThBackColor, <br>"border-left": "solid " + opts.BorderColor + " 1px", <br>"height": opts.ThHeight, <br>"color": opts.ThColor <br>}); <br><br>$("#" + tabid + " td").css({ <br>"border-left": "solid " + opts.BorderColor + " 1px", <br>"height": opts.TdHeight, <br>"border-top": "solid " + opts.BorderColor + " 1px", <br>"padding": "0", <br>"color": opts.TdColor, <br>"background": opts.TdBackColor <br>}); <br>$("#" + tabid + " th:first-child,#" + tabid + " td:first-child").css({ <br>"border-left": "none" <br>}); <br><br>/* <br><br>*/ <br>var str = $("#" + tabid + " td").html(); <br>$("#" + tabid + " td").html("<input style="width:100%; border:none; height:100%;vertical-align:middle" value='" + str + "' readonly>"); <br><br><br>$("#" + tabid + " input").css({ <br>"background-color": opts.TdBackColor, <br><br>"color": opts.TdColor <br>}); <br>if (opts.IsODDChange) { <br>$("#" + tabid + " tr:even").find("input").css({ <br>"background-color": opts.ChangeColor1 <br>}); <br>} <br>if (opts.IsMoveChange == true) { <br>$("#" + tabid + " tr").hover(function () { <br>$(this).find("input").css("background", opts.ChangeColor2); <br>}, function () { <br>$(this).find("input").css("background", opts.TdBackColor); <br><br>}); <br>} <br>$.each($("#" + tabid + " tr"), function () { <br>for (var i = 0; i $(this).find("input").eq(opts.CenterIndex[i]).css({ <br>"text-align": "center" <br>}); <br>} <br>for (var i = 0; i $(this).find("input").eq(opts.EditIndex[i]).removeAttr("readonly"); <br>} <br>}); <br><br>$("body").append("<div id='\"markline\"' style='\"width:1px;height:200px;border-left:1px' solid position:absolute></div> "); <br>$("body").bind("mousemove", function (event) { <br>if (lineMove == true) { <br>$("#markline").css({ <br>"left": event.clientX <br>}).show(); <br>} <br>}); <br><br>$("#" + tabid + " th").bind("mousemove", function (event) { <br>$("body").attr({ <br>onselectstart: "event.returnValue=false" <br>}); <br>var th = $(this); <br>var left = th.offset().left; <br><br>if (th.prevAll().length if ((th.width() - (event.clientX - left)) th.css({ <br>'cursor': 'col-resize' <br>}); <br>} <br>else { <br>th.css({ <br>'cursor': 'default' <br>}); <br>} <br><br>} else if (th.nextAll().length if (event.clientX - left th.css({ <br>'cursor': 'col-resize' <br>}); <br>} <br>else { <br>th.css({ <br>'cursor': 'default' <br>}); <br>} <br><br>} else { <br>if (event.clientX - left th.css({ <br>'cursor': 'col-resize' <br>}); <br>} <br>else { <br>th.css({ <br>'cursor': 'default' <br>}); <br>} <br>} <br>}); <br><br>$("#" + tabid + " th").bind("mousedown", function (event) { <br><br>var th = $(this); <br>var pos = th.offset(); <br>if (th.prevAll().length if ((th.width() - (event.clientX - pos.left)) var height = th.parent().parent().parent().height(); <br>var top = pos.top; <br>$("#markline").css({ <br>"height": height, <br>"top": top, <br>"left": event.clientX, <br>"display": "" <br>}); <br>lineMove = true; <br>if (event.clientX - pos.left currTh = th.prev(); <br>} <br>else { <br>currTh = th; <br>} <br>} <br>} else if (th.nextAll().length if (event.clientX - pos.left var height = th.parent().parent().parent().height(); <br>var top = pos.top; <br>$("#markline").css({ <br>"height": height, <br>"top": top, <br>"left": event.clientX, <br>"display": "" <br>}); <br>lineMove = true; <br>if (event.clientX - pos.left currTh = th.prev(); <br>} <br>else { <br>currTh = th; <br>} <br>} <br><br>} else { <br>if (event.clientX - pos.left var height = th.parent().parent().parent().height(); <br>var top = pos.top; <br>$("#markline").css({ <br>"height": height, <br>"top": top, <br>"left": event.clientX, <br>"display": "" <br>}); <br>lineMove = true; <br>if (event.clientX - pos.left currTh = th.prev(); <br>} <br>else { <br>currTh = th; <br>} <br>} <br>} <br>}); <br>$("body").bind("mouseup", function (event) { <br>$("body").removeAttr("onselectstart"); <br>if (lineMove == true) { <br>$("#markline").hide(); <br>lineMove = false; <br>var pos = currTh.offset(); <br>var index = currTh.prevAll().length; <br>currTh.width(event.clientX - pos.left); <br>$(this).find("tr").each(function () { <br>$(this).children().eq(index).width(event.clientX - pos.left); <br>}); //.children().eq(index).width(event.clientX - pos.left); <br>} <br>}); <br>$("#" + tabid + " tr").bind(opts.RowsType, opts.RowsClick); <br>$("#" + tabid + " input").bind("change", opts.ChangeAction); <br>$("#" + tabid + " input").focus(function (e) { <br>$(this).css({ <br>"border": "none" <br>}) <br>}); <br>$("#" + tabid + " th").bind("mouseup", function (event) { <br>$("body").removeAttr("onselectstart"); <br>if (lineMove == true) { <br>$("#markline").hide(); <br>lineMove = false; <br>var pos = currTh.offset(); <br>var index = currTh.prevAll().length; <br>currTh.width(event.clientX - pos.left); <br>currTh.parent().parent().find("tr").each(function () { <br>$(this).children().eq(index).width(event.clientX - pos.left); <br>}); <br>} <br>}); <br>}; <br>$.fn.ManualTable.defaults = { <br>UpDataUrl: "Updata.do", <br>//定义编辑更新数据远程请求地址（可以不要） <br>TableFontSize: "12px", <br>//定义表格字体大小 <br>ThBackColor: "#005AD2", <br>//定义TH表头背景颜色 <br>ThColor: "#fff", <br>//定义表头文字颜色 <br>ThHeight: "30px", <br>//定义表头高度 <br>TdBackColor: "#FFF", <br>//定义TD背景颜色 <br>TdColor: "red", <br>//定义TD文字颜色 <br>TdHeight: "20px", <br>//定义TD高度 <br>BorderColor: "#555", <br>//定义表格边框线条颜色 <br>IsODDChange: false, <br>//是否隔行变色 这个与鼠标滑动变色不能同时使用 <br>ChangeColor1: "#ff0", <br>//隔行变色颜色 <br>IsMoveChange: true, <br>//是否鼠标滑动变色 <br>ChangeColor2: "#00f", <br>//鼠标滑动变色颜色 <br>CenterIndex: [3, 4, 5, 6], <br>//定义居中列index 0开始 <br>EditIndex: [2, 3, 5], <br>//定义可编辑列index 0开始 <br>//定义编辑触发函数，自动更新保存数据 <br>ChangeAction: function () { <br>var basepath = $.fn.ManualTable.defaults.UpDataUrl; <br>var tds = $(this).parent().parent().find("input"); <br>var str = ""; <br>$.each(tds, function (i) { <br>str += str == "" ? "arg" + i + "=" + $(this).val() : "&arg" + i + "=" + $(this).val(); <br>}); <br>alert(basepath + "?" + str); <br>//$.get($.fn.ManualTable.defaults.UpDataUrl+"?"+str,function(data){ <br>// alert(data); <br>//}); <br>}, <br>//定义行辑触发函数 <br>IsRowsClick: true, <br>//是否触发 <br>RowsType: "dblclick", <br>//触发方式 <br>//触发函数 <br>RowsClick: function () { <br>alert($.fn.ManualTable.defaults.UpDataUrl); <br>} <br><br>}; <br>})(jQuery);