رمز صفحة الويب
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<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> Unted Document </title>
<script>
$ (document). ready (function (e) {
$ ("#gridtable"). manualtable ({
// ChangeAction: function () {
// var inputs = $ (this) .parent (). parent (). find ("input") ؛
//alert(inputs.length) ؛
}
}) ؛
}) ؛
</script>
</head>
<body>
<جدول معرف = "Gridtable">
<head>
<h> رقم الموظف </th>
<h> الاسم </th>
<th> قسم العمل </th>
<th> الموضع </th>
<th> عنوان المنزل </th>
<th> رقم الاتصال </th>
<h> الهاتف المحمول </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>
</r>
<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>
</r>
<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>
</r>
<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>
</r>
</table>
</body>
</html>
<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 ، Options) ؛
$ (هذا) .css ({
"*collapse": "الانهيار" ،
"تباعد الحدود": 0 ،
"العرض": "100 ٪" ،
"الحدود": "Solid" + Opts.BorderColor + "1px" ،
"الحجم الخطي": OPTS.TABLEFONTSIZE
}) ؛
$ ("#" + tabid + "th"). css ({
"الخلفية": OPTS.THBACKCOLOR ،
"الحدود اليسارية": "Solid" + Opts.BorderColor + "1PX" ،
"الارتفاع": opts.hheight ،
"اللون": OPTS.THCOLOR
}) ؛
$ ("#" + tabid + "td"). css ({
"الحدود اليسارية": "Solid" + Opts.BorderColor + "1PX" ،
"الارتفاع": opts.tdheight ،
"أعلى الحدود": "Solid" + Opts.BorderColor + "1px" ،
"الحشو": "0" ،
"اللون": OST.TDCOLOR ،
"الخلفية": OST.TDBACKCOLOR
}) ؛
$ ("#" + tabid + "th: first-child ،#" + tabid + "td: first-child"). css ({
"اليسار الحدودي": "لا شيء"
}) ؛
/*
*/
var str = $ ("#" + tabid + "td"). html () ؛
$ ("#" + tabid + "td"). readonly/> ") ؛
$ ("#" + tabid + "input"). css ({
"خلفية اللون": OST.TDBACKCOLOR ،
"اللون": OTTS.TDCOLOR
}) ؛
if (opts.isodDchange) {
$ ("#" + tabid + "tr: حتى"). البحث ("المدخلات"). css ({
"خلفية اللون": OST.CHANGECOLOR1
}) ؛
}
if (opts.ismovechange == true) {
$ ("#" + tabid + "tr"). hover (function () {
$ (this) .find ("input").
}، وظيفة () {
$ (this) .find ("input").
}) ؛
}
$ .each ($ ("#" + tabid + "tr") ، function () {
لـ (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"). إلحاق ("<div id =/" markline/"style =/" width: 1px ؛ height: 200px ؛ left-left: 1px solid #999 ؛ position: absolute ؛ display: none/"> </viv> ") ؛
$ ("body"). ربط ("mousemove" ، وظيفة (الحدث) {
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 ({
"المؤشر": "افتراضي"
}) ؛
}
} آخر إذا (th.nextall (). الطول <1) {
if (event.clientx - اليسار <4) {
th.css ({
"المؤشر": "Col-Resize"
}) ؛
}
آخر {
th.css ({
"المؤشر": "افتراضي"
}) ؛
}
} آخر {
if (event.clientx - اليسار <4 || (th.width () - (event.clientx - يسار)) <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 ({
"الارتفاع": الارتفاع ،
"TOP": TOP ،
"اليسار": event.clientx ،
"عرض": ""
}) ؛
linemove = صحيح ؛
if (event.clientx - pos.left <th.width () / 2) {
currth = th.prev () ؛
}
آخر {
currth = th ؛
}
}
} آخر إذا (th.nextall (). الطول <1) {
if (event.clientx - pos.left <4) {
var height = th.parent (). parent (). parent (). height () ؛
var top = pos.top ؛
$ ("#markline"). css ({
"الارتفاع": الارتفاع ،
"TOP": TOP ،
"اليسار": event.clientx ،
"عرض": ""
}) ؛
linemove = صحيح ؛
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 ({
"الارتفاع": الارتفاع ،
"TOP": TOP ،
"اليسار": event.clientx ،
"عرض": ""
}) ؛
linemove = صحيح ؛
if (event.clientx - pos.left <th.width () / 2) {
currth = th.prev () ؛
}
آخر {
currth = th ؛
}
}
}
}) ؛
$ ("body"). ربط ("mouseup" ، وظيفة (الحدث) {
$ ("body"). removeAttr ("onSelectStart") ؛
if (linemove == true) {
$ ("#markline"). Hide () ؛
linemove = خطأ ؛
var pos = currth.offset () ؛
var index = currth.prevall (). الطول ؛
currth.width (event.clientx - pos.left) ؛
$ (this) .find ("tr"). كل (وظيفة () {
$ (هذا).
}) ؛
}
}) ؛
$ ("#" + tabid + "tr"). bind (Opts.RowStype ، Opts.RowsClick) ؛
$ ("#" + tabid + "input"). bind ("Change" ، Opts.ChangeAction) ؛
$ ("#" + tabid + "input"). التركيز (الدالة (e) {
$ (هذا) .css ({
"الحدود": "لا شيء"
})
}) ؛
$ ("#" + tabid + "th"). bind ("mouseup" ، function (event) {
$ ("body"). removeAttr ("onSelectStart") ؛
if (linemove == true) {
$ ("#markline"). Hide () ؛
linemove = خطأ ؛
var pos = currth.offset () ؛
var index = currth.prevall (). الطول ؛
currth.width (event.clientx - pos.left) ؛
currth.parent (). parent (). find ("tr"). كل (وظيفة () {
$ (هذا).
}) ؛
}
}) ؛
} ؛
$ .fn.manualtable.defaults = {
updataurl: "updata.do" ،
// تحديد عنوان الطلب عن بُعد لتحرير البيانات وتحديثها (لا يمكن السماح بها)
TableFontsize: "12px" ،
// تحديد حجم خط الجدول
ThbackColor: "#005AD2" ،
// حدد لون الخلفية لرأس الجدول th
thcolor: "#ffff" ،
// تحديد لون نص الرأس
thheight: "30px" ،
// تحديد ارتفاع الرأس
TdbackColor: "#FFF" ،
// تحديد لون خلفية TD
tdcolor: "أحمر" ،
// تحديد لون نص TD
tdheight: "20px" ،
// تحديد ارتفاع TD
الحدود: "#555" ،
// تحديد لون خط الحدود الجدول
isoddchange: خطأ ،
// ما إذا كان يجب تغيير اللون المتداخلة ، لا يمكن استخدام هذا في نفس الوقت مثل تغيير لون الفأر
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 (). find ("input") ؛
var str = "" ؛
$. EECH (TDS ، function (i) {
str + = str == ""؟
}) ؛
تنبيه (basepath + "؟" + str) ؛
// $. get ($. fn.manualtable.defaults.updataurl+"؟"
// التنبيه (البيانات) ؛
//}) ؛
} ،
// تحديد وظيفة تحرير الخط
isrowsclick: صحيح ،
// سواء كان ذلك
Rowstype: "dblclick" ،
// طريقة الزناد
// وظيفة الزناد
Rowsclick: function () {
ALERT ($. fn.manualtable.defaults.updataurl) ؛
}
} ؛
}) (jQuery) ؛ </pre> <br>
<pre> </pre>
<br>