Код веб -страницы
Кода -копия выглядит следующим образом:
<! 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> unt назвал документ </title>
<Скрипт>
$ (document) .ready (function (e) {
$ ("#Gridtable"). Manualtable ({
// ChangeAction: function () {
// var входы = $ (this) .parent (). parent (). find ("input");
//Alert(Inputs.length);
}
});
});
</script>
</head>
<тело>
<таблица идентификатора = "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>
</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 curth = null;
var opts = $ .extend ({}, $ .fn.manualtable.defaults, опции);
$ (this) .css ({
"*Пограничный коллапс": "коллапс",
"Пограничное расстояние": 0,
«Ширина»: «100%»,
«граница»: «твердый» + opts.bordercolor + "1px",
«Размер шрифта»: opts.tablefontsize
});
$ ("#" + tabid + "th"). CSS ({
«Фон»: Opts.thbackcolor,
"Lever-Lefft": "Solid" + Opts.BorderColor + "1px",
«высота»: Opts.TheHight,
«Цвет»: Opts.thcolor
});
$ ("#" + tabid + "td"). CSS ({
"Lever-Lefft": "Solid" + Opts.BorderColor + "1px",
«высота»: opts.tdheight,
«Пограничный топ»: «твердый» + opts.bordercolor + "1px",
"Padding": "0",
"Color": Opts.tdcolor,
«Фон»: Opts.tbackcolor
});
$ ("#" + tabid + "th: First-child,#" + tabid + "td: First-crild"). CSS ({{{{{{{{{
"Лебь границы": "нет"
});
/*
*/
var str = $ ("#" + tabid + "td"). html ();
$ ("#" + tabid + "td"). html ("<<input style = 'ширина: 100%; граница: нет; высота: 100%; вертикальный альбом: средний' value = '" + str + "' ' readonly/> ");
$ ("#" + tabid + "input"). CSS ({
«Фоно-цвета»: Opts.tbackcolor,
«Цвет»: Opts.tdcolor
});
if (opts.isoddchange) {
$ ("#" + tabid + "tr: даже"). Найти ("Ввод"). CSS ({
«Фоно-цвета»: Opts.ChangeColor1
});
}
if (opts.ismovechange == true) {
$ ("#" + tabid + "tr"). Hover (function () {
$ (this) .find ("input"). CSS ("фон", opts.changecolor2);
}, function () {
$ (this) .find ("input"). CSS ("фон", opts.tdbackcolor);
});
}
$.
for (var i = 0; i <opts.centerindex.length; i ++) {
$ (this) .find ("input"). eq (opts.centerindex [i]). CSS ({
"Текст-альбом": "Центр"
});
}
для (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 ({
"Left": Event.clientx
}).показывать();
}
});
$ ("#" + tabid + "th"). Bind ("mouseMove", function (event) {
$ ("body"). attr ({
OnSelectStart: "event.returnValue = false"
});
var th = $ (это);
var Left = th.offset (). слева;
if (th.prevall (). длина <1) {
if (th.width () - (event.clientx - слева)) <4) {
th.css ({
«Курсор»: 'col-resize'
});
}
еще {
th.css ({
'Cursor': 'по умолчанию'
});
}
} else if (th.nextall (). длина <1) {
if (event.clientx - Left <4) {
th.css ({
«Курсор»: 'col-resize'
});
}
еще {
th.css ({
'Cursor': 'по умолчанию'
});
}
} еще {
if (event.clientx - слева <4 || (th.width () - (event.clientx - слева)) <4) {
th.css ({
«Курсор»: 'col-resize'
});
}
еще {
th.css ({
'Cursor': 'по умолчанию'
});
}
}
});
$ ("#" + tabid + "th"). Bind ("mousedown", function (event) {
var th = $ (это);
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 ({
«высота»: высота,
«Верх»: топ,
"Left": event.clientx,
"отображать": ""
});
lineMove = true;
if (event.clientx - pos.left <th.width () / 2) {
curth = th.prev ();
}
еще {
curth = 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 ({
«высота»: высота,
«Верх»: топ,
"Left": event.clientx,
"отображать": ""
});
lineMove = true;
if (event.clientx - pos.left <th.width () / 2) {
curth = th.prev ();
}
еще {
curth = 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 ({
«высота»: высота,
«Верх»: топ,
"Left": event.clientx,
"отображать": ""
});
lineMove = true;
if (event.clientx - pos.left <th.width () / 2) {
curth = th.prev ();
}
еще {
curth = th;
}
}
}
});
$ ("body"). Bind ("mouseUp", function (event) {
$ ("тело"). RemoveAttr ("OnselectStart");
if (linemove == true) {
$ ("#markline"). Hide ();
lineMove = false;
var pos = curth.offset ();
var index = curth.prevall ().
curth.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 ("изменение", opts.changeaction);
$ ("#" + tabid + "input"). Focus (e) {
$ (this) .css ({
"Граница": "Нет"
})
});
$ ("#" + tabid + "th"). Bind ("mouseUp", function (event) {
$ ("тело"). RemoveAttr ("OnselectStart");
if (linemove == true) {
$ ("#markline"). Hide ();
lineMove = false;
var pos = curth.offset ();
var index = curth.prevall ().
curth.width (event.clientx - pos.left);
curth.parent (). parent (). Найти ("tr"). Каждый (function () {
$ (this) .Children (). EQ (Index) .width (Event.Clientx - pos.left);
});
}
});
};
$ .fn.manualtable.defaults = {
Updataurl: "Updata.do",
// Определите удаленный адрес запроса для редактирования и обновления данных (может быть не разрешен)
TableFontsize: "12px",
// определить размер шрифта таблицы
Thbackcolor: "#005AD2",
// Определите цвет фона заголовка таблицы TH
Thcolor: "#ffff",
// Определите цвет текста заголовка
Тхайт: "30px",
// Определите высоту заголовка
Tdbackcolor: "#fff",
// Определите цвет фона TD
Tdcolor: "красный",
// Определите цвет текста TD
Tdheight: "20px",
// Определите высоту TD
Bordercolor: "#555",
// Определите цвет границы стола
Isodddchange: ложь,
// Будь то изменение цвета, это не может быть использовано в то же время, что и раздвижный цвет мыши с изменением мыши
ChangeColor1: "#ff0",
// Чередитное изменение цвета
IsmoveChange: Правда,
// изменяет ли мышь слайд цвет
ChangeColor2: "#00f",
// Изменение цвета мыши с раздвижным цветом мыши
CenterIndex: [3, 4, 5, 6],
// Определите индекс центрального столбца 0 запуска
Editindex: [2, 3, 5],
// Определите редактируемый индекс столбцов 0 запуска
// Определите функцию редактирования триггера, автоматически обновлять и сохранять данные
ChangeAction: function () {
var basepath = $ .fn.manualtable.defaults.updataurl;
var tds = $ (this) .parent (). parent (). найти ("input");
var str = "";
$.
str + = str == ""?
});
предупреждение (BasePath + "?" + str);
// $. get ($. fn.manualtable.defaults.updataurl+"?"+str, function (data) {
// предупреждение (данные);
//});
},
// Определите функцию триггера редактирования линии
Isrowsclick: Правда,
// Будьте
Rowstype: "dblclick",
// метод запуска
// Триггер функция
Rowsclick: function () {
Alert ($. fn.manualtable.defaults.updataurl);
}
};
}) (jQuery); </pre> <br>
<pre> </pre>
<br>