Webページコード
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<script type = "text/javascript" src = "jquery-2.0.3.min.js"> </scrip>
<script type = "text/javascript" src = "manualtable2.js"> </scrip>
<title> un unt ittitled document </title>
<スクリプト>
$（document）.ready（function（e）{
$（ "＃gridtable"）。マニュアルテーブル（{
// changeaction：function（）{
// var inputs = $（this）.parent（）。parent（）。find（ "input"）;
//alert(inputs.length）;
}
}）;
}）;
</script>
</head>
<body>
<表ID = "gridtable">
<head>
<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>
</table>
</body>
</html>
<pre code_snippet_id = "251084" snippet_file_name = "blog_20140322_1_1781185" name = "code"> //シニアオンラインのスクリプトに従って変更し、いくつかの機能を追加しました。
//このスクリプトは装飾機能であり、ネイティブテーブルをサポートしますが、他の要素とテーブルをサポートしていません。
（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（{
「*国境融解」：「崩壊」、
「境界線」：0
「幅」：「100％」、
「Border」：「Solid」 + Opts.BorderColor + "1PX"、
「フォントサイズ」：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、
「ボーダートップ」：「ソリッド」 + 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％; border：none; height：100％; vertical-align：middle' value = '" + str + "' '' readonly/> "）;
$（ "＃" + tabid + "input"）。css（{
「バックグラウンドカラー」：opts.tdbackcolor、
「色」：opts.tdcolor
}）;
if（opts.isoddchange）{
$（ "＃" + tabid + "tr：ven"）。find（ "input"）。css（{{
「バックグラウンドカラー」：opts.changecolor1
}）;
}
if（opts.ismovechange == true）{
$（ "＃" + tabid + "tr"）。hover（function（）{
$（this）.find（ "input"）。css（ "background"、opts.changecolor2）;
}、 関数 （） {
$（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（{{
「テキストアライグ」：「センター」
}）;
}
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（{
「左」：event.clientx
}）。見せる（）;
}
}）;
$（ "＃" + tabid + "th"）。bind（ "mousemove"、function（event）{
$（ "body"）。attr（{
onSelectStart：「event.returnValue = false」
}）;
var th = $（this）;
var left = th.offset（）。左;
if（th.prevall（）。長さ<1）{
if（（th.width（） - （event.clientx-左））<4）{
th.css（{
「カーソル」：「col-Resize」
}）;
}
それ以外 {
th.css（{
「カーソル」：「デフォルト」
}）;
}
} else if（th.nextall（）。長さ<1）{
if（event.clientx -left <4）{
th.css（{
「カーソル」：「col-Resize」
}）;
}
それ以外 {
th.css（{
「カーソル」：「デフォルト」
}）;
}
} それ以外 {
if（event.clientx -left <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（）。長さ<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（）。長さ<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（）。length;
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.changeaction）;
$（ "＃" + tabid + "input"）。フォーカス（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（）。length;
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"、
//データの編集と更新のリモートリクエストアドレスを定義します（許可されません）
TableFontsize： "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"、
//マウスのスライド色の変更
CenterIndex：[3、4、5、6]、
//中心列のインデックス0を定義します
editindex：[2、3、5]、
//編集可能な列インデックス0を定義します
//トリガー関数の編集を定義し、データを自動的に更新および保存します
変化：function（）{
var basepath = $ .fn.manualtable.defaults.updataurl;
var tds = $（this）.parent（）。parent（）。find（ "input"）;
var str = "";
$ .each（tds、function（i）{
str + = str == ""？
}）;
アラート（basepath + "？" + str）;
// $。get（$
// alert（data）;
//}）;
}、
// trigger関数を編集します
Isrowsclick：本当、
//トリガーするかどうか
RowStype： "dblclick"、
//トリガーメソッド
//トリガー関数
rowsclick：function（）{
アラート（$。fn.manualtable.defaults.updataurl）;
}
};
}）（jQuery）; </pre> <br>
<pre> </pre>
<br>