Sample code to turn table into 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 ; >//Trigger method<BR>//Trigger function<BR>RowsClick: function () { <BR>alert($.fn.ManualTable.defaults.UpDataUrl); <BR>} <BR><BR>}; <BR>})(jQuery);