管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

让table变成exls的示例代码

　　网页代码

复制代码代码如下:

　　<!doctype html>

　　<html>

　　<head>

　　<title>无标题文档</title>

　　$(document).ready(function(e) {

　　$("#GridTable").ManualTable({

　　//ChangeAction:function(){

　　// var inputs=$(this).parent().parent().find("input");

　　//alert(inputs.length);

　　}

　　});

　　</script>

　　</head>

　　<body >

　　<thead>

　　</thead>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</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>

　　<br>

教程首页更多教程