Code de page Web
La copie de code est la suivante:
<! doctype html>
<html>
<adal>
<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 intitulé Document </Title>
<cript>
$ (document) .ready (fonction (e) {
$ ("# GridTable"). ManualTable ({{
// ChangeAction: fonction () {
// var entrées = $ (this) .parent (). parent (). find ("input");
//alert(Inputs.Length);
}
});
});
</cript>
</ head>
<body>
<table id = "gridTable">
<adal>
<th> Numéro d'employé </th>
<th> nom </th>
<th> service de travail </th>
<th> position </th>
<h> Adresse personnelle </th>
<h> Numéro de contact </th>
<th> téléphone mobile </th>
<th> Remarques </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>
</docy>
</html>
<pre code_snippet_id = "251084" snippet_file_name = "blog_20140322_1_1781185" name = "code"> // Je l'ai changé selon le script de mon senior en ligne et ajouté quelques fonctions, qui peuvent être utiles aux débutants pour les débutants
// Ce script est une fonction décorative, prend en charge les tables natives, mais ne prend pas en charge les tables avec d'autres éléments.
(fonction ($) {
$ .fn.manualTable = fonction (options) {
var tabid = $ (this) .attr ("id");
var lineMove = false;
var currth = null;
var opts = $ .extend ({}, $ .fn.manualTable.defaults, options);
$ (this) .css ({
"* Border-Collapse": "s'effondrer",
"Espacement des bordures": 0,
"largeur": "100%",
"bordure": "solide" + opts.bordercolor + "1px",
"Font-Size": Opts.TableFontize
});
$ ("#" + tabid + "th"). css ({
"fond": opts.thackColor,
"Border-Left": "solide" + opts.bordercolor + "1px",
"Hauteur": opts.
"couleur": opts.thcolor
});
$ ("#" + tabid + "td"). css ({
"Border-Left": "solide" + opts.bordercolor + "1px",
"hauteur": opts.tdheight,
"bordure": "solide" + opts.bordercolor + "1px",
"rembourrage": "0",
"couleur": opts.tdcolor,
"fond": opts.tdbackcolor
});
$ ("#" + tabid + "th: premier-enfant, #" + tabid + "td: premier-enfant"). css ({{
"Border-Left": "Aucun"
});
/ *
* /
var str = $ ("#" + tabid + "td"). html ();
$ ("#" + tabid + "td"). html ("<style d'entrée = 'width: 100%; bordure: aucun; hauteur: 100%; adign vertical: middle' value = '" + str + "' readonly /> ");
$ ("#" + tabid + "entrée"). CSS ({
"Background-Color": opts.tdbackColor,
"couleur": opts.tdcolor
});
if (opts.isoddchange) {
$ ("#" + tabid + "tr: même"). trouver ("entrée"). CSS ({
"Background-Color": opts.changecolor1
});
}
if (opts.isMoveChange == true) {
$ ("#" + tabid + "tr"). hover (function () {
$ (this) .find ("entrée"). CSS ("fond", opts.changecolor2);
}, fonction () {
$ (this) .find ("entrée"). CSS ("fond", opts.tdbackColor);
});
}
$ .each ($ ("#" + tabid + "tr"), function () {
pour (var i = 0; i <opts.centerIndex.length; i ++) {
$ (this) .find ("input"). eq (opts.centerIndex [i]). CSS ({
"Text-Align": "Centre"
});
}
pour (var i = 0; i <opts.editIndex.length; i ++) {
$ (this) .find ("entrée"). eq (opts.editIndex [i]). Removeattr ("readonly");
}
});
$ ("body"). append ("<div id = /" markline / "style = /" width: 1px; hauteur: 200px; border-left: 1px solide # 999; position: absolu; affichage: aucun / "> </div> ");
$ ("body"). bind ("MouseMove", fonction (événement) {
if (lineMove == true) {
$ ("# markline"). CSS ({{
"gauche": event.clientx
}).montrer();
}
});
$ ("#" + tabid + "th"). bind ("mousmove", fonction (événement) {
$ ("body"). att ({
onSelectStart: "event.returnvalue = false"
});
var th = $ (this);
var left = th.offset (). gauche;
if (th.prevall (). longueur <1) {
if ((th.width () - (event.clientx - gauche)) <4) {
Th.css ({
«curseur»: «Col-Resize»
});
}
autre {
Th.css ({
«curseur»: «par défaut»
});
}
} else if (th.nextall (). longueur <1) {
if (event.clientx - gauche <4) {
Th.css ({
«curseur»: «Col-Resize»
});
}
autre {
Th.css ({
«curseur»: «par défaut»
});
}
} autre {
if (event.clientx - gauche <4 || (th.width () - (event.clientx - gauche)) <4) {
Th.css ({
«curseur»: «Col-Resize»
});
}
autre {
Th.css ({
«curseur»: «par défaut»
});
}
}
});
$ ("#" + tabid + "th"). bind ("mousdown", fonction (événement) {
var th = $ (this);
var pos = th.offset ();
if (th.prevall (). longueur <1) {
if ((th.width () - (event.clientx - pos.left)) <4) {
var height = th.parent (). Parent (). Parent (). Height ();
var top = pos.top;
$ ("# markline"). CSS ({{
"hauteur": hauteur,
"Top": haut,
"gauche": event.clientx,
"afficher": ""
});
lineMove = true;
if (event.clientx - pos.left <th.width () / 2) {
currth = th.prev ();
}
autre {
curth = th;
}
}
} else if (th.nextall (). longueur <1) {
if (event.clientx - pos.left <4) {
var height = th.parent (). Parent (). Parent (). Height ();
var top = pos.top;
$ ("# markline"). CSS ({{
"hauteur": hauteur,
"Top": haut,
"gauche": event.clientx,
"afficher": ""
});
lineMove = true;
if (event.clientx - pos.left <th.width () / 2) {
currth = th.prev ();
}
autre {
curth = th;
}
}
} autre {
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 ({{
"hauteur": hauteur,
"Top": haut,
"gauche": event.clientx,
"afficher": ""
});
lineMove = true;
if (event.clientx - pos.left <th.width () / 2) {
currth = th.prev ();
}
autre {
curth = th;
}
}
}
});
$ ("body"). bind ("mouseup", fonction (événement) {
$ ("corps"). Removeattr ("onselectStart");
if (lineMove == true) {
$ ("# markline"). hide ();
lineMove = false;
var pos = currth.offset ();
var index = currth.prevall (). longueur;
currth.width (event.clientx - pos.left);
$ (this) .find ("tr"). Chaque (fonction () {
$ (this) .children (). eq (index) .width (event.clientx - pos.left);
});
}
});
$ ("#" + tabid + "tr"). bind (opts.rowstype, opts.rowsclick);
$ ("#" + tabid + "entrée"). bind ("modifier", opts.changeAction);
$ ("#" + tabid + "entrée"). focus (fonction (e) {
$ (this) .css ({
"Border": "Aucun"
})
});
$ ("#" + tabid + "th"). bind ("mouseup", fonction (événement) {
$ ("corps"). Removeattr ("onselectStart");
if (lineMove == true) {
$ ("# markline"). hide ();
lineMove = false;
var pos = currth.offset ();
var index = currth.prevall (). longueur;
currth.width (event.clientx - pos.left);
currth.parent (). parent (). find ("tr"). chaque (fonction () {
$ (this) .children (). eq (index) .width (event.clientx - pos.left);
});
}
});
};
$ .fn.manualTable.defaults = {
Updataurl: "updata.do",
// Définissez l'adresse de demande distante pour l'édition et la mise à jour des données (ne peut pas être autorisée)
TableFontsize: "12px",
// définir la taille de la police de la table
ThbackColor: "# 005ad2",
// Définissez la couleur d'arrière-plan de l'en-tête de la table
Thcolor: "#ffff",
// Définissez la couleur du texte de l'en-tête
Thheight: "30px",
// définir la hauteur de l'en-tête
TdbackColor: "#fff",
// Définir la couleur d'arrière-plan TD
Tdcolor: "rouge",
// Définir la couleur du texte TD
Tdheight: "20px",
// définir la hauteur TD
BorderColor: "# 555",
// Définissez la couleur de la ligne de bordure de la table
ISODDCHANGE: FAUX,
// Que ce soit pour changer la couleur entrelacée, cela ne peut pas être utilisé en même temps que la couleur de changement de glissement de la souris
ChangeColor1: "# ff0",
// Modifications de couleur entrelacées
Ismovechange: vrai,
// si la diapositive de la souris modifie la couleur
ChangeColor2: "# 00F",
// Changement de couleurs coulissantes de la souris
CenterIndex: [3, 4, 5, 6],
// Définir l'indice de colonne centrale 0 Démarrage
EditIndex: [2, 3, 5],
// définir l'index de colonne modifiable 0 Démarrage
// Définir la fonction de déclenchement de modification, mettre à jour et enregistrer automatiquement les données
ChangeAction: fonction () {
var basepath = $ .fn.manualTable.defaults.updataurl;
var tds = $ (this) .parent (). parent (). find ("input");
var str = "";
$ .each (tds, fonction (i) {
str + = str == ""?
});
alerte (basepath + "?" + str);
// $. get ($. fn.manualTable.defaults.updataurl + "?" + str, function (data) {
// alerte (données);
//});
},
// Définir la fonction de déclenchement de modification de ligne
Isrowsclick: vrai,
// s'il faut déclencher
RowStype: "dblclick",
// Méthode de déclenchement
// Fonction de déclenchement
Rowsclick: function () {
alert ($. fn.manualTable.defaults.updataurl);
}
};
}) (jQuery); </ pre> <br>
<pre> </pre>
<br>