Sample code to turn table into exls_jquery

Web page code

Copy code The code is as follows:

<script> <br>$(document).ready(function(e) { <br>$("#GridTable").ManualTable({ <br>//ChangeAction:function(){ <br>// var inputs=$(this).parent().parent().find("input"); <br>//alert(inputs.length); <br>} <br>}); <br>}); <br></script>

员工编号	姓名	工作部门	职务	家庭住址	联系电话	手机	备注
456456	456456	456456	456456	456456	456456	456456	456456
456456	456456	456456	456456	456456	456456	456456	456456
456456	456456	456456	456456	456456	456456	456456	456456
456456	456456	456456	456456	456456	456456	456456	456456

// 根据网上前辈的脚本改了一下，添加了一些功能，也许对初学者有些帮助 <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);