테이블을 exls_jquery로 변환하는 샘플 코드-JS 튜토리얼-php.cn

웹페이지 코드
코드 복사 코드는 다음과 같습니다.
<머리>

无标题文档
<스크립트>
$(document).ready(function(e) {
$("#GridTable").ManualTable({
//ChangeAction:function(){
// var inputs=$( this).parent().parent().find("input");
//alert(inputs.length)
}
});

<본문>

<머리>
번째>员工编号
<일>姓명
<일>공작부门
<일>职务
가족장일>
<일>联系电话
<일>핸드机
<일>备注
//了一些功能，也许对初학술자유些帮助 <br>//这个脚本就是个装饰작용,对樹持table支持，不过不支持table有其它元素 <br>(function ($) { <br>$.fn. ManualTable = 함수(옵션) { <br>var tabid = $(this).attr("id"); <br>var lineMove = false; <br>var currTh = null; ({}, $.fn.ManualTable.defaults, 옵션); <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>"배경": 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>"색상": opts.TdColor, <br>"배경": 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 "' 읽기 전용/>"); <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>"왼쪽": event.clientX <br>}).show(); <br>} <br>}) <br><br>$("#" tabid " th").bind("mousemove ", 함수(이벤트) { <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 - 왼쪽)) < 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 - 왼쪽 < 4) { <BR>th.css({ <BR>'cursor': 'col-resize' <BR>}) <BR>} <BR>else { <BR>th.css( { <BR>'커서': '기본값' <BR>}); <BR>} <br><br>} else { <BR>if (event.clientX - 왼쪽 < 4 || (th.width( ) - (event.clientX - 왼쪽)) < 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": 높이, <BR>"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 = 일; <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": 높이, <BR>"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 = 일; <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": 높이, <BR>"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 = 일; <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; 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表头背景颜color <BR>ThColor: "#fff", <BR>//정정表头文字颜color <BR>ThHeight: "30px", <BR>//정정表头높이도 <BR>TdBackColor: "#FFF", <BR>//정정TD背景颜color <BR>TdColor: "red", <BR>//정정 TD문자 글자색 <BR>TdHeight: "20px", <BR>//정정TD고도 <BR>BorderColor: "#555", <BR>//결정义表格边框线条颜color <BR>IsODDChange: false, <BR> //是否隔行变color 这个与鼠标滑动变color不能同时使用 <BR>ChangeColor1: "#ff0", <BR>//隔行变color颜color <BR>IsMoveChange: <BR>//是妐鼠标滑动变color <BR> ChangeColor2: "#00f", <BR>//鼠标滑动变color颜color <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 ; >//트리거 메서드<BR>//트리거 함수<BR>RowsClick: function () { <BR>alert($.fn.ManualTable.defaults.UpDataUrl) <BR>} <BR><BR>}; <BR>})(jQuery);
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