萬盛學電腦網 >> 腳本專題 >> javascript >> 讓table變成exls的示例代碼
讓table變成exls的示例代碼
這篇文章主要介紹了讓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) { ifjavascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved