這篇文章主要介紹了讓table變成exls的方法,需要的朋友可以參考下
網頁代碼 代碼如下: <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-2.0.3.min.js"></script> <script type="text/javascript" src="ManualTable2.js"></script> <title>無標題文檔</title> <script> $(document).ready(function(e) { $("#GridTable").ManualTable({ //ChangeAction:function(){ // var inputs=$(this).parent().parent().find("input"); //alert(inputs.length); } }); }); </script> </head> <body > <table id="GridTable"> <thead> <th>員工編號</th> <th >姓名</th> <th >工作部門</th> <th>職務</th> <th>家庭住址</th> <th >聯系電話</th> <th >手機</th> <th>備注</th> </thead> <tr> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> </tr> <tr> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> </tr> <tr> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> </tr> <tr> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> <td>456456</td> </tr> </table> </body> </html> <pre code_snippet_id="251084" snippet_file_name="blog_20140322_1_1781185" name="code" class="javascript">// 根據網上前輩的腳本改了一下，添加了一些功能，也許對初學者有些幫助 //這個腳本就是個裝飾作用,對原生的table支持，不過不支持table有其它元素 (function ($) { $.fn.ManualTable = function (options) { var tabid = $(this).attr("id"); var lineMove = false; var currTh = null; var opts = $.extend({}, $.fn.ManualTable.defaults, options); $(this).css({ "*border-collapse": "collapse", "border-spacing": 0, "width": "100%", "border": "solid " + opts.BorderColor + " 1px", "font-size": opts.TableFontSize }); $("#" + tabid + " th").css({ "background": opts.ThBackColor, "border-left": "solid " + opts.BorderColor + " 1px", "height": opts.ThHeight, "color": opts.ThColor }); $("#" + tabid + " td").css({ "border-left": "solid " + opts.BorderColor + " 1px", "height": opts.TdHeight, "border-top": "solid " + opts.BorderColor + " 1px", "padding": "0", "color": opts.TdColor, "background": opts.TdBackColor }); $("#" + tabid + " th:first-child,#" + tabid + " td:first-child").css({ "border-left": "none" }); /* */ var str = $("#" + tabid + " td").html(); $("#" + tabid + " td").html("<input style='width:100%; border:none; height:100%;vertical-align:middle' value='" + str + "' readonly/>"); $("#" + tabid + " input").css({ "background-color": opts.TdBackColor, "color": opts.TdColor }); if (opts.IsODDChange) { $("#" + tabid + " tr:even").find("input").css({ "background-color": opts.ChangeColor1 }); } if (opts.IsMoveChange == true) { $("#" + tabid + " tr").hover(function () { $(this).find("input").css("background", opts.ChangeColor2); }, function () { $(this).find("input").css("background", opts.TdBackColor); }); } $.each($("#" + tabid + " tr"), function () { for (var i = 0; i < opts.CenterIndex.length; i++) { $(this).find("input").eq(opts.CenterIndex[i]).css({ "text-align": "center" }); } for (var i = 0; i < opts.EditIndex.length; i++) { $(this).find("input").eq(opts.EditIndex[i]).removeAttr("readonly"); } }); $("body").append("<div id="markline" style="width:1px;height:200px;border-left:1px solid #999; position:absolute;display:none" ></div> "); $("body").bind("mousemove", function (event) { if (lineMove == true) { $("#markline").css({ "left": event.clientX }).show(); } }); $("#" + tabid + " th").bind("mousemove", function (event) { $("body").attr({ onselectstart: "event.returnValue=false" }); var th = $(this); var left = th.offset().left; if (th.prevAll().length < 1) { if ((th.width() - (event.clientX - left)) < 4) { th.css({ 'cursor': 'col-resize' }); } else { th.css({ 'cursor': 'default' }); } } else if (th.nextAll().length < 1) { if (event.clientX - left < 4) { th.css({ 'cursor': 'col-resize' }); } else { th.css({ 'cursor': 'default' }); } } else { if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) { th.css({ 'cursor': 'col-resize' }); } else { th.css({ 'cursor': 'default' }); } } }); $("#" + tabid + " th").bind("mousedown", function (event) { var th = $(this); var pos = th.offset(); if (th.prevAll().length < 1) { if ((th.width() - (event.clientX - pos.left)) < 4) { var height = th.parent().parent().parent().height(); var top = pos.top; $("#markline").css({ "height": height, "top": top, "left": event.clientX, "display": "" }); lineMove = true; if (event.clientX - pos.left < th.width() / 2) { currTh = th.prev(); } else { currTh = th; } } } else if (th.nextAll().length < 1) { if (event.clientX - pos.left < 4) { var height = th.parent().parent().parent().height(); var top = pos.top; $("#markline").css({ "height": height, "top": top, "left": event.clientX, "display": "" }); lineMove = true; if (event.clientX - pos.left < th.width() / 2) { currTh = th.prev(); } else { currTh = th; } } } else { if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) { var height = th.parent().parent().parent().height(); var top = pos.top; $("#markline").css({ "height": height, "top": top, "left": event.clientX, "display": "" }); lineMove = true; if (event.clientX - pos.left < th.width() / 2) { currTh = th.prev(); } else { currTh = th; } } } }); $("body").bind("mouseup", function (event) { $("body").removeAttr("onselectstart"); if (lineMove == true) { $("#markline").hide(); lineMove = false; var pos = currTh.offset(); var index = currTh.prevAll().length; currTh.width(event.clientX - pos.left); $(this).find("tr").each(function () { $(this).children().eq(index).width(event.clientX - pos.left); }); //.children().eq(index).width(event.clientX - pos.left); } }); $("#" + tabid + " tr").bind(opts.RowsType, opts.RowsClick); $("#" + tabid + " input").bind("change", opts.ChangeAction); $("#" + tabid + " input").focus(function (e) { $(this).css({ "border": "none" }) }); $("#" + tabid + " th").bind("mouseup", function (event) { $("body").removeAttr("onselectstart"); if (lineMove == true) { $("#markline").hide(); lineMove = false; var pos = currTh.offset(); var index = currTh.prevAll().length; currTh.width(event.clientX - pos.left); currTh.parent().parent().find("tr").each(function () { $(this).children().eq(index).width(event.clientX - pos.left); }); } }); }; $.fn.ManualTable.defaults = { UpDataUrl: "Updata.do", //定義編輯更新數據遠程請求地址（可以不要） TableFontSize: "12px", //定義表格字體大小 ThBackColor: "#005AD2", //定義TH表頭背景顏色 ThColor: "#fff", //定義表頭文字顏色 ThHeight: "30px", //定義表頭高度 TdBackColor: "#FFF", //定義TD背景顏色 TdColor: "red", //定義TD文字顏色 TdHeight: "20px", //定義TD高度 BorderColor: "#555", //定義表格邊框線條顏色 IsODDChange: false, //是否隔行變色 這個與鼠標滑動變色不能同時使用 ChangeColor1: "#ff0", //隔行變色顏色 IsMoveChange: true, //是否鼠標滑動變色 ChangeColor2: "#00f", //鼠標滑動變色顏色 CenterIndex: [3, 4, 5, 6], //定義居中列index 0開始 EditIndex: [2, 3, 5], //定義可編輯列index 0開始 //定義編輯觸發函數，自動更新保存數據 ChangeAction: function () { var basepath = $.fn.ManualTable.defaults.UpDataUrl; var tds = $(this).parent().parent().find("input"); var str = ""; $.each(tds, function (i) { str += str == "" ? "arg" + i + "=" + $(this).val() : "&arg" + i + "=" + $(this).val(); }); alert(basepath + "?" + str); //$.get($.fn.ManualTable.defaults.UpDataUrl+"?"+str,function(data){ // alert(data); //}); }, //定義行輯觸發函數 IsRowsClick: true, //是否觸發 RowsType: "dblclick", //觸發方式 //觸發函數 RowsClick: function () { alert($.fn.ManualTable.defaults.UpDataUrl); } }; })(jQuery);</pre><br> <pre></pre> <br>