웹 페이지 코드
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<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>
<cript>
$ (document). readip (function (e) {
$ ( "#gridtable"). manualtable ({{
// ChangeAction : function () {
// var inputs = $ (this) .parent (). parent (). find ( "input");
//alert (inputs.length);
}
});
});
</스크립트>
</head>
<body>
<table id = "gridtable">
<헤드>
<th> 직원 번호 </th>
<th> 이름 </th>
<th> 작업 부서 </th>
<th> 위치 </th>
<Th> 가정 주소 </th>
<Th> 접촉 번호 </th>
<th> 휴대 전화 </th>
<th> 비고 </th>
</head>
<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>
</테이블>
</body>
</html>
<pre pre code_snippet_id = "251084"snippet_file_name = "blog_20140322_1_1781185"name = "code"> // 나는 선임 온라인의 스크립트에 따라 그것을 변경했으며 일부 기능을 추가했는데, 이는 초보자에게 도움이 될 수 있습니다.
//이 스크립트는 장식 기능이며 기본 테이블을 지원하지만 다른 요소가있는 테이블을 지원하지 않습니다.
(기능 ($) {
$ .fn.manualTable = 함수 (옵션) {
var tabid = $ (this) .attr ( "id");
var linemove = false;
var currth = null;
var opts = $ .extend ({}, $ .fn.manualtable.defaults, 옵션);
$ (this) .css ({
"*Border-Collapse": "붕괴",
"국경 간격": 0,
"폭": "100%",
"국경": "solid" + opts.bordercolor + "1px",
"Font-Size": Opts.tableFontsize
});
$ ( "#" + tabid + "th"). css ({
"배경": Opts.thbackColor,
"Border-Left": "solid" + opts.bordercolor + "1px",
"높이": Opts.thheight,
"색상": opts.thcolor
});
$ ( "#" + tabid + "td"). css ({
"Border-Left": "solid" + opts.bordercolor + "1px",
"높이": opts.tdheight,
"Border-Top": "solid" + opts.bordercolor + "1px",
"패딩": "0",
"색상": opts.tdcolor,
"배경": opts.tdbackcolor
});
$ ( "#" + tabid + "Th : First-Child,#" + tabid + "TD : First-Child"). CSS ({{
"국경-왼쪽": "없음"
});
/*
*/
var str = $ ( "#" + tabid + "td"). html ();
$ ( "#" + tabid + "td"). html ( "<input style = 'width : 100%; 테두리 : 없음; 높이 : 100%; 수직-정상 : 중간'value = '" + str + "' Readonly/> ");
$ ( "#" + tabid + "input"). css ({
"배경색": opts.tdbackcolor,
"색상": opts.tdcolor
});
if (opts.isoddchange) {
$ ( "#" + tabid + "tr : 짝수"). 찾기 ( "input"). css ({{
"배경색": opts.changecolor1
});
}
if (opts.ismovechange == true) {
$ ( "#" + tabid + "tr"). hover (function () {
$ (this) .find ( "입력"). css ( "배경", opts.changecolor2);
}, 기능 () {
$ (this) .find ( "입력"). css ( "배경", opts.tdbackcolor);
});
}
$ .Each ($ ( "#" + tabid + "tr"), function () {
for (var i = 0; i <opts.centerindex.length; i ++) {
$ (this) .find ( "input"). eq (opts.centerindex [i]). css ({{
"텍스트-정렬": "센터"
});
}
for (var i = 0; i <opts.editindex.length; i ++) {
$ (this) .find ( "input"). eq (opts.editIndex [i]). RemoveAttr ( "readonly");
}
});
$ ( "body"). Append ( "<div id =/"markline/"style =/"너비 : 1px; 높이 : 200px; 경계-왼쪽 : 1px solid #999; 위치 : 절대; 디스플레이 : 없음/"> </div> ");
$ ( "body"). bind ( "mousemove", function (event) {
if (lineMove == true) {
$ ( "#markline"). css ({
"왼쪽": event.clientx
}).보여주다();
}
});
$ ( "#" + tabid + "th"). bind ( "mousemove", function (event) {
$ ( "body"). attr ({
OnSelectStart : "event.returnValue = false"
});
var th = $ (this);
var left = th.offset (). 왼쪽;
if (th.prevall (). length <1) {
if ((th.width () - (event.clientx -left)) <4) {
th.css ({
'커서': 'col-resize'
});
}
또 다른 {
th.css ({
'커서': '기본값'
});
}
} else if (th.nextall (). length <1) {
if (event.clientx- 왼쪽 <4) {
th.css ({
'커서': 'col-resize'
});
}
또 다른 {
th.css ({
'커서': '기본값'
});
}
} 또 다른 {
if (event.clientx- 왼쪽 <4 || (th.width () - (event.clientx -left)) <4) {
th.css ({
'커서': 'col-resize'
});
}
또 다른 {
th.css ({
'커서': '기본값'
});
}
}
});
$ ( "#" + 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 ({
"높이": 높이,
"상단": 상단,
"왼쪽": event.clientx,
"표시하다": ""
});
linemove = true;
if (event.clientx- pos.left <th.width () / 2) {
currth = th.prev ();
}
또 다른 {
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 ({
"높이": 높이,
"상단": 상단,
"왼쪽": event.clientx,
"표시하다": ""
});
linemove = true;
if (event.clientx- pos.left <th.width () / 2) {
currth = th.prev ();
}
또 다른 {
currth = th;
}
}
} 또 다른 {
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 ({
"높이": 높이,
"상단": 상단,
"왼쪽": event.clientx,
"표시하다": ""
});
linemove = true;
if (event.clientx- pos.left <th.width () / 2) {
currth = th.prev ();
}
또 다른 {
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 (). 길이;
currth.width (event.clientx -pos.left);
$ (this) .find ( "tr"). 각 (function () {
$ (this) .children (). eq (index) .width (event.clientx -pos.left);
});
}
});
$ ( "#" + tabid + "tr"). bind (opts.rowstype, opts.rowsclick);
$ ( "#" + tabid + "input"). bind ( "change", opts.changeacect);
$ ( "#" + tabid + "input"). Focus (function (e) {
$ (this) .css ({
"국경": "없음"
})
});
$ ( "#" + tabid + "th"). bind ( "mouseup", function (event) {
$ ( "body"). removeAttr ( "onselectStart");
if (lineMove == true) {
$ ( "#markline"). hide ();
linemove = false;
var pos = currth.offset ();
var index = currth.prevall (). 길이;
currth.width (event.clientx -pos.left);
currth.parent (). parent (). find ( "tr"). 각 (function () {
$ (this) .children (). eq (index) .width (event.clientx -pos.left);
});
}
});
};
$ .fn.manualtable.defaults = {
updataurl : "updata.do",
// 데이터 편집 및 업데이트를위한 원격 요청 주소 정의 (허용되지 않음)
테이블 폰트 크기 : "12px",
// 테이블 글꼴 크기를 정의합니다
thbackcolor : "#005ad2",
// TH 테이블 헤더의 배경색을 정의합니다
thcolor : "#ffff",
// 헤더 텍스트의 색상을 정의합니다
thheight : "30px",
// 헤더 높이를 정의합니다
tdbackColor : "#fff",
// TD 배경색 정의
tdcolor : "빨간색",
// TD 텍스트 색상을 정의합니다
tdheight : "20px",
// TD 높이를 정의합니다
BorderColor : "#555",
// 테이블 테두리 라인의 색상을 정의합니다
ISODDCHANGE : False,
// 컬러를 변경할지 여부는 마우스 슬라이딩 변경 색상과 동시에 사용할 수 없습니다.
changecolor1 : "#ff0",
// 인터레이스 된 색상 변경
ISMOVECHANGE : 사실,
// 마우스 슬라이드가 색상이 변경되는지 여부
changecolor2 : "#00f",
// 마우스 슬라이딩 색상 변경
중심 인덱스 : [3, 4, 5, 6],
// 중앙 열 인덱스를 정의합니다. 0은 시작됩니다
editindex : [2, 3, 5],
// 편집 가능한 열 인덱스 0을 정의합니다
// 트리거 편집 함수를 정의하고 자동으로 업데이트하고 데이터를 저장합니다
Changeacect : 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). "& arg" + i + "=" + $ (this) .val ();
});
경고 (BasePath + "?" + str);
// $. get ($. fn.manualtable.defaults.updataurl+"?"+str, function (data) {
// 경고 (데이터);
//});
},
// 라인 편집 트리거 기능을 정의합니다
Isrowsclick : 사실,
// 트리거 여부
rowstype : "dblclick",
// 트리거 메소드
// 트리거 함수
RowsClick : function () {
경고 ($. fn.manualtable.defaults.updataurl);
}
};
}) (jQuery); </pre> <br>
<pre> </pre>
<br>