Webseitencode
Die Codekopie lautet wie folgt:
<! docType html>
<html>
<kopf>
<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> bis zum Titel "Dokument" </title>
<Script>
$ (Dokument) .Ready (Funktion (e) {
$ ("#GridTable"). ManualTabelle ({{{
// ChangeAction: function () {
// var Inputs = $ (this) .Parent (). parent (). find ("input");
//alert(inputs.length);
}
});
});
</script>
</head>
<body>
<table id = "gridTable">
<kopf>
<Th> Mitarbeiternummer </th>
<Th> Name </th>
<Th> Arbeitsabteilung </th>
<Th> Position </th>
<Th> Home -Adresse </th>
<Th> Kontaktnummer </th>
<Th> Handy </th>
<Th> Bemerkungen </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"> // Ich habe es gemäß dem Skript meines älteren Online -Rahmens geändert und einige Funktionen hinzuge
// Dieses Skript ist eine dekorative Funktion, unterstützt native Tabellen, unterstützt jedoch keine Tabellen mit anderen Elementen.
(Funktion ($) {
$ .fn.ManualTable = Funktion (Optionen) {
var tabid = $ (this) .attr ("id");
var linemove = false;
var currth = null;
var opts = $ .extend ({}, $ .fn.ManualTable.Defaults, Optionen);
$ (this) .css ({{
"*Border-Collapse": "Zusammenbruch",
"Randabstand": 0,,
"Breite": "100%",
"Rand": "Solid" + optts.borderColor + "1px",
"Schriftgröße": opts.tablefontsize
});
$ ("#" + tabid + "th"). CSS ({{{
"Hintergrund": optts.thbackcolor,
"Border-Links": "Solid" + opts.borderColor + "1px",
"Höhe": optts.thheight,
"Farbe": optts.thcolor
});
$ ("#" + tabid + "td"). CSS ({{{
"Border-Links": "Solid" + opts.borderColor + "1px",
"Höhe": opts.tdheight,
"Border-Top": "Solid" + opts.borderColor + "1px",
"Polsterung": "0",
"Farbe": opts.tdcolor,
"Hintergrund": opts.tdbackcolor
});
$ ("#" + tabid + "Th: Erstkind,#" + tabid + "td: First-Child"). CSS ({{{{
"Border-Links": "Keine"
});
/*
*/
var str = $ ("#" + tabid + "td"). html ();
$ ("#" + tabid + "td"). readonly/> ");
$ ("#" + tabid + "Eingabe"). CSS ({{
"Hintergrundfarbe": opts.tdbackcolor,
"Farbe": opts.tdcolor
});
if (optts.isoddchange) {
$ ("#" + tabid + "tr: sogar"). Find ("Eingabe"). CSS ({{{
"Hintergrundfarbe": opts.changeColor1
});
}
if (opts.ismovechange == true) {
$ ("#" + tabid + "tr"). Hover (function () {
$ (this) .find ("Eingabe"). CSS ("Hintergrund", opts.changeColor2);
}, function () {
$ (this) .find ("Eingabe"). CSS ("Hintergrund", opts.tdbackcolor);
});
}
$ .each ($ ("#" + tabid + "tr"), function () {
für (var i = 0; i <opts.CenterIndex.length; i ++) {
$ (this) .find ("Eingabe"). EQ (opts.CenterIndex [i]). CSS ({{
"Text-Align": "Mitte"
});
}
für (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; Höhe: 200px; Border-Links: 1PX Solid #999; Position: Absolut; Anzeige: Keine/"> </div> ");
$ ("Body"). Bind ("Mousemove", Funktion (Ereignis) {
if (linemove == true) {
$ ("#markline"). CSS ({{
"links": event.clientX
}).zeigen();
}
});
$ ("#" + tabid + "th"). Bind ("Mousemove", Funktion (Ereignis) {
$ ("Körper"). Attr ({{
OnselectStart: "Event.ReturnValue = False"
});
var th = $ (this);
var links = th.offset (). links;
if (th.prevall (). Länge <1) {
if ((th.width () - (event.clientX - links)) <4) {
th.css ({{
'Cursor': 'col-resize' '
});
}
anders {
th.css ({{
'Cursor': 'Standard'
});
}
} else if (th.nextall (). Länge <1) {
if (event.clientX - links <4) {
th.css ({{
'Cursor': 'col-resize' '
});
}
anders {
th.css ({{
'Cursor': 'Standard'
});
}
} anders {
if (event.clientX - links <4 || (th.width () - (event.clientX - links)) <4) {
th.css ({{
'Cursor': 'col-resize' '
});
}
anders {
th.css ({{
'Cursor': 'Standard'
});
}
}
});
$ ("#" + tabid + "Th"). Bind ("MouseDown", Funktion (Ereignis) {
var th = $ (this);
var pos = th.offset ();
if (th.prevall (). Länge <1) {
if ((th.width () - (event.clientX - pos.left)) <4) {
var hohe = th.Parent (). parent (). parent (). height ();
var top = pos.top;
$ ("#markline"). CSS ({{
"Höhe": Höhe,
"Top": Top,
"links": event.clientX,
"Anzeige": ""
});
linemove = true;
if (event.clientX - pos.left <th.width () / 2) {
currth = th.prev ();
}
anders {
currth = th;
}
}
} else if (th.nextall (). Länge <1) {
if (event.clientX - pos.left <4) {
var hohe = th.Parent (). parent (). parent (). height ();
var top = pos.top;
$ ("#markline"). CSS ({{
"Höhe": Höhe,
"Top": Top,
"links": event.clientX,
"Anzeige": ""
});
linemove = true;
if (event.clientX - pos.left <th.width () / 2) {
currth = th.prev ();
}
anders {
currth = th;
}
}
} anders {
if (event.clientX - pos.left <4 || (th.width () - (event.clientX - pos.left) <4) {
var hohe = th.Parent (). parent (). parent (). height ();
var top = pos.top;
$ ("#markline"). CSS ({{
"Höhe": Höhe,
"Top": Top,
"links": event.clientX,
"Anzeige": ""
});
linemove = true;
if (event.clientX - pos.left <th.width () / 2) {
currth = th.prev ();
}
anders {
currth = th;
}
}
}
});
$ ("Body"). Bind ("MouseUp", Funktion (Ereignis) {
$ ("Körper"). removeattr ("OnselectStart");
if (linemove == true) {
$ ("#markline"). hide ();
linemove = false;
var pos = currth.Offset ();
var index = currth.prevall (). Länge;
Currth.width (Event.ClientX - pos.Left);
$ (this) .find ("tr"). Jede (function () {
$ (this) .Children (). EQ (Index) .Width (Event.ClientX - Pos.Left);
});
}
});
$ ("#" + tabid + "tr"). Bind (opts.rowstype, opts.rowsclick);
$ ("#" + tabid + "Eingabe"). Bind ("Change", opts.changeAction);
$ ("#" + tabid + "Eingabe"). FOCUS (Funktion (e) {
$ (this) .css ({{
"Grenze": "Keine"
})
});
$ ("#" + tabid + "th"). Bind ("MouseUp", Funktion (Ereignis) {
$ ("Körper"). removeattr ("OnselectStart");
if (linemove == true) {
$ ("#markline"). hide ();
linemove = false;
var pos = currth.Offset ();
var index = currth.prevall (). Länge;
Currth.width (Event.ClientX - pos.Left);
Currth.Parent (). Parent (). Find ("tr"). Jede (function () {
$ (this) .Children (). EQ (Index) .Width (Event.ClientX - Pos.Left);
});
}
});
};
$ .fn.ManualTable.Defaults = {
Updataurl: "updata.do",
// Definieren Sie die Remote -Anforderungsadresse für die Bearbeitung und Aktualisierung von Daten (kann nicht zulässig sein)
TableFontsize: "12px",
// Definieren Sie die Tabelle Schriftgröße
ThbackColor: "#005ad2",
// Definieren Sie die Hintergrundfarbe des TH -Tischkopfs
Thcolor: "#ffff",
// Definieren Sie die Farbe des Header -Textes
ThHeight: "30px",
// Definieren Sie die Headerhöhe
Tdbackcolor: "#fff",
// TD -Hintergrundfarbe definieren
Tdcolor: "rot",
// TD -Textfarbe definieren
TDHEIGHT: "20px",
// TD -Höhe definieren
BorderColor: "#555",
// Definieren Sie die Farbe der Tabellenrandlinie
Isoddchange: Falsch,
// Ob Sie die Farbe ändern, kann dies nicht gleichzeitig verwendet werden, um die Farbe der Maus zu ändern
ChangeColor1: "#ff0",
// Verzierung Farbänderungen
Ismovechange: wahr,
// Ob die Mausschieber die Farbe ändert
ChangeColor2: "#00f",
// Mausschieberfarbe Änderung
CenterIndex: [3, 4, 5, 6],
// Definieren Sie den Center Spalte Index 0 startet
Editindex: [2, 3, 5],
// Bearbeitbare Spaltenindex 0 definieren. Startet
// Definieren Sie die Funktion der Auslöser bearbeiten, aktualisieren Sie automatisch und speichern Sie Daten
Changaction: function () {
var basepath = $ .fn.ManualTable.Defaults.Updataurl;
var tds = $ (this) .Parent (). parent (). find ("input");
var str = "";
$ .each (tds, Funktion (i) {
STR + = STR == ""?
});
alarm (basepath + "?" + str);
// $. Get ($. fn.manualTable.Defaults.Updataurl+"?"+str, Funktion (Daten) {
// alarm (Daten);
//});
},
// Funktion zur Zeilenbearbeitung Triggerfunktion definieren
Isrowsclick: wahr,
// ob ausgelöst werden soll
Rowstype: "DblClick",
// Auslösermethode
// Abzugsfunktion
Rowsclick: function () {
alert ($. fn.manualTable.Defaults.Updataurl);
}
};
}) (jQuery); </pre> <br>
<pre> </pre>
<br>