Kode halaman web
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<type script = "Text/JavaScript" src = "jQuery-2.0.3.min.js"> </script>
<script type = "text/javascript" src = "manualtable2.js"> </script>
<title> unt judul dokumen </iteme>
<script>
$ (dokumen) .ready (function (e) {
$ ("#Gridtable"). Manualtable ({
// changeAction: function () {
// input var = $ (this) .parent (). parent (). find ("input");
//alert(inputs.length);
}
});
});
</script>
</head>
<body>
<tabel id = "gridtable">
<head>
<th> Nomor Karyawan </th>
<th> nama </t>
<TH> Departemen Kerja </t>
<th> Posisi </th>
<TH> Alamat rumah </t>
<TH> Nomor Kontak </th>
<th> ponsel </t>
<TH> Keterangan </t>
</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>
</boable>
</body>
</html>
<pre code_snippet_id = "251084" snippet_file_name = "blog_20140322_1_1781185" name = "code"> // Saya mengubahnya sesuai dengan skrip senior saya secara online dan menambahkan beberapa fungsi, yang mungkin membantu bagi pemula saya
// Script ini adalah fungsi dekoratif, mendukung tabel asli, tetapi tidak mendukung tabel dengan elemen lain.
(function ($) {
$ .fn.ManualTable = function (opsi) {
var tabid = $ (this) .attr ("id");
var linemove = false;
var Currth = null;
var opts = $ .extend ({}, $ .fn.manualtable.defaults, opsi);
$ (ini) .css ({
"*border-collapse": "runtuh",
"spasi perbatasan": 0,
"Lebar": "100%",
"border": "solid" + opts.bordercolor + "1px",
"font-size": opts.tablefontsize
});
$ ("#" + tabid + "th"). css ({
"Latar belakang": opts.thbackColor,
"Border-left": "solid" + opts.bordercolor + "1px",
"Tinggi": opts.theight,
"Warna": opts.thcolor
});
$ ("#" + tabid + "td"). css ({
"Border-left": "solid" + opts.bordercolor + "1px",
"Tinggi": opts.tdheight,
"Border-top": "solid" + opts.bordercolor + "1px",
"padding": "0",
"Warna": opts.tdcolor,
"Latar belakang": opts.tdbackColor
});
$ ("#" + Tabid + "Th: First-Child,#" + Tabid + "TD: First-Child"). CSS ({
"Border-left": "None"
});
/*
*/
var str = $ ("#" + tabid + "td"). html ();
$ ("#" + tabid + "td"). html ("<input style = 'width: 100%; border: none; tinggi: 100%; vertical-align: value' middle = '" + str + "' readonly/> ");
$ ("#" + tabid + "input"). css ({
"Latar Belakang": opts.tdbackcolor,
"Warna": opts.tdcolor
});
if (opts.isoddchange) {
$ ("#" + tabid + "tr: even"). find ("input"). css ({
"Latar Belakang": opts.changecolor1
});
}
if (opts.ismovechange == true) {
$ ("#" + tabid + "tr"). hover (function () {
$ (ini) .find ("input"). css ("latar belakang", opts.changecolor2);
}, fungsi () {
$ (ini) .find ("input"). css ("latar belakang", opts.tdbackcolor);
});
}
$ .each ($ ("#" + tabid + "tr"), function () {
untuk (var i = 0; i <opts.centerIndex.length; i ++) {
$ (ini) .find ("input"). eq (opts.centerIndex [i]). css ({
"Text-align": "Center"
});
}
untuk (var i = 0; i <opts.editIndex.length; i ++) {
$ (ini) .find ("input"). eq (opts.editIndex [i]). RemoveAttr ("readonly");
}
});
$ ("body"). append ("<div id =/" markline/"style =/" width: 1px; tinggi: 200px; kiri-kiri: 1px solid #999; posisi: absolute; tampilan: tidak ada/"> </div> ");
$ ("body"). bind ("mousemove", function (event) {
if (linemove == true) {
$ ("#Markline"). CSS ({
"Left": event.clientx
}).menunjukkan();
}
});
$ ("#" + tabid + "th"). bind ("mousemove", function (event) {
$ ("body"). attr ({
OnSelectStart: "Event.ReturnValue = FALSE"
});
var th = $ (ini);
var kiri = th.offset (). Kiri;
if (th.prevall (). length <1) {
if ((th.width () - (event.clientx - kiri)) <4) {
th.css ({
'kursor': 'col-resize'
});
}
kalau tidak {
th.css ({
'kursor': 'default'
});
}
} else if (th.nextAll (). length <1) {
if (event.clientx - kiri <4) {
th.css ({
'kursor': 'col-resize'
});
}
kalau tidak {
th.css ({
'kursor': 'default'
});
}
} kalau tidak {
if (event.clientx - kiri <4 || (th.width () - (event.clientx - kiri)) <4) {
th.css ({
'kursor': 'col-resize'
});
}
kalau tidak {
th.css ({
'kursor': 'default'
});
}
}
});
$ ("#" + tabid + "th"). bind ("mousedown", function (event) {
var th = $ (ini);
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 ({
"Tinggi": Tinggi,
"Top": Top,
"Left": event.clientx,
"menampilkan": ""
});
linemove = true;
if (event.clientx - pos.left <th.width () / 2) {
Currth = th.prev ();
}
kalau tidak {
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 ({
"Tinggi": Tinggi,
"Top": Top,
"Left": event.clientx,
"menampilkan": ""
});
linemove = true;
if (event.clientx - pos.left <th.width () / 2) {
Currth = th.prev ();
}
kalau tidak {
Currth = th;
}
}
} kalau tidak {
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 ({
"Tinggi": Tinggi,
"Top": Top,
"Left": event.clientx,
"menampilkan": ""
});
linemove = true;
if (event.clientx - pos.left <th.width () / 2) {
Currth = th.prev ();
}
kalau tidak {
Currth = th;
}
}
}
});
$ ("body"). bind ("mouseup", function (event) {
$ ("tubuh"). RemoveAttr ("OnSelectStart");
if (linemove == true) {
$ ("#Markline"). Sembunyikan ();
linemove = false;
var pos = Currth.Offset ();
indeks var = Currth.prevall (). Panjang;
Currth.width (event.clientx - pos.left);
$ (ini) .find ("tr"). masing -masing (fungsi () {
$ (ini) .Children (). EQ (indeks) .width (event.clientx - pos.left);
}); //.children().eq(index).
}
});
$ ("#" + tabid + "tr"). bind (opts.rowstype, opts.rowsclick);
$ ("#" + tabid + "input"). bind ("ubah", opts.changeAction);
$ ("#" + tabid + "input"). focus (function (e) {
$ (ini) .css ({
"Perbatasan": "Tidak Ada"
})
});
$ ("#" + tabid + "th"). bind ("mouseup", function (event) {
$ ("tubuh"). RemoveAttr ("OnSelectStart");
if (linemove == true) {
$ ("#Markline"). Sembunyikan ();
linemove = false;
var pos = Currth.Offset ();
indeks var = Currth.prevall (). Panjang;
Currth.width (event.clientx - pos.left);
Currth.parent (). Parent (). Find ("tr"). masing -masing (fungsi () {
$ (ini) .Children (). EQ (indeks) .width (event.clientx - pos.left);
});
}
});
};
$ .fn.manualtable.defaults = {
Updataurl: "Updata.do",
// Tentukan alamat permintaan jarak jauh untuk mengedit dan memperbarui data (tidak dapat diizinkan)
TableFontsize: "12px",
// Tentukan ukuran font tabel
ThBackColor: "#005Ad2",
// Tentukan warna latar belakang header tabel th
Thcolor: "#ffff",
// Tentukan warna teks header
Thheight: "30px",
// Tentukan ketinggian header
TDBackColor: "#FFF",
// Tentukan warna latar belakang TD
Tdcolor: "merah",
// Tentukan warna teks TD
Tdheight: "20px",
// Tentukan tinggi TD
BorderColor: "#555",
// Tentukan warna garis batas meja
Isoddchange: false,
// Apakah akan mengubah warna interlaced, ini tidak dapat digunakan pada saat yang sama dengan warna perubahan geser mouse
Changecolor1: "#ff0",
// Perubahan warna yang saling terkait
IsMovechange: Benar,
// Apakah slide mouse mengubah warna
Changecolor2: "#00f",
// perubahan warna geser mouse
CenterIndex: [3, 4, 5, 6],
// Tentukan indeks kolom tengah 0 dimulai
EditIndex: [2, 3, 5],
// Tentukan indeks kolom yang dapat diedit 0 dimulai
// Tentukan fungsi pemicu Edit, perbarui dan simpan data secara otomatis
ChangeAction: function () {
var basepath = $ .fn.Manualtable.defaults.updataurl;
var tds = $ (this) .parent (). parent (). find ("input");
var str = "";
$ .each (tds, function (i) {
str + = str == ""?
});
peringatan (Basepath + "?" + str);
// $. get ($. fn.manualtable.defaults.updataurl+"?"+str, function (data) {
// peringatan (data);
//});
},
// Tentukan fungsi edit line function
IsrowsClick: Benar,
// apakah akan memicu
Rowstype: "DBlClick",
// Metode pemicu
// fungsi pemicu
RowsClick: function () {
peringatan ($. fn.manualtable.defaults.updataurl);
}
};
}) (jQuery); </pre> <br>
<pr Pre> </per>
<br>