让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 < opts.CenterIndex.length; i++) { <BR>$(this).find("input").eq(opts.CenterIndex[i]).css({ <BR>"text-align": "center" <BR>}); <BR>} <BR>for (var i = 0; i < opts.EditIndex.length; i++) { <BR>$(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 #999; position:absolute;display:none\" ></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 < 1) { <BR>if ((th.width() - (event.clientX - left)) < 4) { <BR>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 < 1) { <BR>if (event.clientX - left < 4) { <BR>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 < 4 || (th.width() - (event.clientX - left)) < 4) { <BR>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 < 1) { <BR>if ((th.width() - (event.clientX - pos.left)) < 4) { <BR>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 < th.width() / 2) { <BR>currTh = th.prev(); <BR>} <BR>else { <BR>currTh = th; <BR>} <BR>} <BR>} else if (th.nextAll().length < 1) { <BR>if (event.clientX - pos.left < 4) { <BR>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 < th.width() / 2) { <BR>currTh = th.prev(); <BR>} <BR>else { <BR>currTh = th; <BR>} <BR>} <br><br>} else { <BR>if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) { <BR>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 < th.width() / 2) { <BR>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);