Código de página web
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<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> un documento titulado </title>
<script>
$ (documento) .Ready (function (e) {
$ ("#GridTable"). ManualTable ({
// Changeaction: function () {
// var entradas = $ (this) .Parent (). Parent (). Find ("Entrada");
//alert(inputs.length);
}
});
});
</script>
</ablo>
<Body>
<table id = "GridTable">
<Evista>
<th> Número de empleado </th>
<th> nombre </th>
<th> Departamento de trabajo </th>
<th> posición </th>
<th> Dirección de casa </th>
<th> Número de contacto </th>
<th> Teléfono móvil </th>
<th> Observaciones </th>
</ablo>
<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" fnippet_file_name = "Blog_20140322_1_1781185" name = "código"> // Lo cambié de acuerdo con el script de mi senior en línea y agregué algunas funciones, que pueden ser de ayuda para principiantes a principiantes para principiantes
// Este script es una función decorativa, admite tablas nativas, pero no admite tablas con otros elementos.
(función ($) {
$ .fn.ManualTable = function (opciones) {
var tabid = $ (this) .attr ("id");
var linemove = false;
var currth = null;
var opts = $ .extend ({}, $ .fn.ManualTable.defaults, opciones);
$ (esto) .css ({
"*border-colapso": "colapso",
"Border-Spacing": 0,
"Ancho": "100%",
"Border": "Solid" + Opts.BorderColor + "1px",
"Fuente del tamaño": Opts.TableFontSize
});
$ ("#" + tabid + "th"). CSS ({
"Antecedentes": opts.thbackcolor,
"Border-izquierda": "Solid" + Opts.BorderColor + "1px",
"Altura": opts.
"Color": opts.thcolor
});
$ ("#" + tabid + "td"). CSS ({
"Border-izquierda": "Solid" + Opts.BorderColor + "1px",
"altura": opts.tdheight,
"Border-Top": "Solid" + Opts.BorderColor + "1px",
"Pading": "0",
"Color": Opts.tdcolor,
"Antecedentes": opts.tdbackcolor
});
$ ("#" + Tabid + "Th: First-Child,#" + Tabid + "TD: First-Child"). CSS ({
"Border-izquierda": "Ninguno"
});
/*
*/
var str = $ ("#" + tabid + "td"). html ();
$ ("#" + tabid + "td"). html ("<input style = 'width: 100%; border: none; altura: 100%; vertical-align: middle' value = '" + str + "' readonly/> ");
$ ("#" + tabid + "entrada"). CSS ({
"Color de fondo": opts.tdbackcolor,
"Color": opts.tdcolor
});
if (opts.isoddchange) {
$ ("#" + tabid + "tr: incluso"). Find ("Entrada"). CSS ({
"Color de fondo": Opts.Changecolor1
});
}
if (opts.ismovechange == true) {
$ ("#" + tabid + "tr"). Hover (function () {
$ (this) .find ("entrada"). CSS ("Antecedentes", Opts.ChangEColor2);
}, función () {
$ (this) .find ("entrada"). CSS ("Antecedentes", Opts.tdbackColor);
});
}
$ .each ($ ("#" + tabid + "tr"), function () {
para (var i = 0; i <opts.centerindex.length; i ++) {
$ (this) .find ("entrada"). eq (opts.centerindex [i]). CSS ({
"Text-Align": "Center"
});
}
para (var i = 0; i <opts.editindex.length; i ++) {
$ (this) .find ("entrada"). eq (opts.editindex [i]). removeattr ("readonly");
}
});
$ ("Body"). Append ("<div id =/" markline/"style =/" ancho: 1px; altura: 200px; borde-izquierda: 1px sólido #999; posición: absoluto; visualización: none/"> </div> ");
$ ("Body"). Bind ("MouseMove", función (evento) {
if (linemove == true) {
$ ("#Markline"). CSS ({
"Left": Event.clientx
}).espectáculo();
}
});
$ ("#" + tabid + "th"). bind ("mouseMove", function (evento) {
$ ("cuerpo"). attr ({
onSelectStart: "Event.ReturnValue = False"
});
var th = $ (esto);
var izquierda = th.offset (). Izquierda;
if (th.prevall (). longitud <1) {
if ((th.width () - (event.clientx - izquierda)) <4) {
th.css ({
'cursor': 'col-rese'
});
}
demás {
th.css ({
'cursor': 'predeterminado'
});
}
} else if (th.nextall (). longitud <1) {
if (event.clientx - izquierda <4) {
th.css ({
'cursor': 'col-rese'
});
}
demás {
th.css ({
'cursor': 'predeterminado'
});
}
} demás {
if (event.clientx - izquierda <4 || (th.width () - (event.clientx - izquierda)) <4) {
th.css ({
'cursor': 'col-rese'
});
}
demás {
th.css ({
'cursor': 'predeterminado'
});
}
}
});
$ ("#" + tabid + "th"). bind ("mouseDown", function (evento) {
var th = $ (esto);
var Pos = th.OffSet ();
if (th.prevall (). longitud <1) {
if ((th.width () - (event.clientx - pos.left)) <4) {
var altura = th.parent (). Parent (). Parent (). Height ();
var top = pos.top;
$ ("#Markline"). CSS ({
"Altura": Altura,
"Top": Top,
"Left": Event.clientx,
"mostrar": ""
});
Linemove = True;
if (event.clientx - pos.left <th.width () / 2) {
Currth = th.prev ();
}
demás {
Currth = th;
}
}
} else if (th.nextall (). longitud <1) {
if (event.clientx - pos.left <4) {
var altura = th.parent (). Parent (). Parent (). Height ();
var top = pos.top;
$ ("#Markline"). CSS ({
"Altura": Altura,
"Top": Top,
"Left": Event.clientx,
"mostrar": ""
});
Linemove = True;
if (event.clientx - pos.left <th.width () / 2) {
Currth = th.prev ();
}
demás {
Currth = th;
}
}
} demás {
if (event.clientx - pos.left <4 || (th.width () - (event.clientx - pos.left)) <4) {
var altura = th.parent (). Parent (). Parent (). Height ();
var top = pos.top;
$ ("#Markline"). CSS ({
"Altura": Altura,
"Top": Top,
"Left": Event.clientx,
"mostrar": ""
});
Linemove = True;
if (event.clientx - pos.left <th.width () / 2) {
Currth = th.prev ();
}
demás {
Currth = th;
}
}
}
});
$ ("Body"). Bind ("MouseUp", function (Event) {
$ ("Body"). RemoveAtTR ("OnSelectStart");
if (linemove == true) {
$ ("#Markline"). Hide ();
linemove = false;
var Pos = Currth.OffSet ();
Var index = Currth.Prevall (). Longitud;
Currth.Width (event.clientx - pos.left);
$ (this) .find ("tr"). Cada (function () {
$ (this) .children (). Eq (índice) .Width (event.clientx - pos.left);
}) ;/.Children()
}
});
$ ("#" + tabid + "tr"). bind (opts.rowstype, opts.rowsclick);
$ ("#" + tabid + "entrada"). Bind ("Change", Opts.ChangeAction);
$ ("#" + tabid + "entrada"). Focus (function (e) {
$ (esto) .css ({
"Border": "Ninguno"
})
});
$ ("#" + tabid + "th"). bind ("mouseup", function (evento) {
$ ("Body"). RemoveAtTR ("OnSelectStart");
if (linemove == true) {
$ ("#Markline"). Hide ();
linemove = false;
var Pos = Currth.OffSet ();
Var index = Currth.Prevall (). Longitud;
Currth.Width (event.clientx - pos.left);
Currth.Parent (). Parent (). Find ("Tr"). Cada (function () {
$ (this) .children (). Eq (índice) .Width (event.clientx - pos.left);
});
}
});
};
$ .fn.ManualTable.defaults = {
Updataurl: "updata.do",
// Defina la dirección de solicitud remota para editar y actualizar datos (no se puede permitir)
TablefontSize: "12px",
// Defina el tamaño de la fuente de la tabla
Thbackcolor: "#005AD2",
// Defina el color de fondo del encabezado de la tabla
Thcolor: "#ffff",
// Defina el color del texto del encabezado
THEight: "30px",
// Defina la altura del encabezado
Tdbackcolor: "#fff",
// Defina el color de fondo TD
Tdcolor: "rojo",
// Definir el color del texto TD
Tdheight: "20px",
// Defina la altura de TD
BorderColor: "#555",
// Defina el color de la línea de borde de la mesa
Isoddchange: falso,
// Si cambiar el color entrelazado, esto no se puede usar al mismo tiempo que el color deslizante del mouse cambia el color
Changecolor1: "#ff0",
// Cambios de color entrelazados
Ismovechange: verdadero,
// Si la diapositiva del mouse cambia de color
Changecolor2: "#00f",
// Cambio de color deslizante del mouse
CenterIndex: [3, 4, 5, 6],
// Defina el índice de columna central 0 comienza
EditIndex: [2, 3, 5],
// Definir el índice de columna editable 0 comienza
// Definir la función de activación de editar, actualizar y guardar datos automáticamente
Changeaction: function () {
var basepath = $ .fn.ManualTable.defaults.updataurl;
var tds = $ (this) .Parent (). Parent (). Find ("Entrada");
var str = "";
$ .each (tds, function (i) {
str + = str == ""?
});
alerta (basepath + "?" + str);
// $. Get ($.
// alerta (datos);
//});
},
// Definir la función de activación de edición de línea
IsRowsClick: verdadero,
// si activar
Rowstype: "dblclick",
// método de activación
// función de activación
ShowsClick: functer () {
alerta ($. fn.ManualTable.defaults.updataurl);
}
};
}) (jQuery); </pre> <br>
<pre> </pre>
<br>