DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 讓table變成exls的示例代碼
讓table變成exls的示例代碼
編輯:JavaScript綜合知識     

 這篇文章主要介紹了讓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> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved