Código da página da web
A cópia do código é a seguinte:
<! 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> unt intitulado Documento </title>
<Cript>
$ (document) .ready (function (e) {
$ ("#Gridtable"). ManualTable ({
// ChangeAction: function () {
// var inputs = $ (this) .Parent (). Parent (). Find ("Input");
//Alert(Inputs.Length);
}
});
});
</script>
</head>
<Body>
<tabela id = "gridtable">
<head>
<th> Número do funcionário </th>
<th> nome </th>
<th> Departamento de Trabalho </th>
<th> posição </th>
<th> Endereço inicial </th>
<th> Número de contato </th>
<th> telefone celular </th>
<th> Comentários </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>
</tabela>
</body>
</html>
<pré code_snippet_id = "251084" snippet_file_name = "blog_20140322_1_1781185" name = "code"> // mudei de acordo com o script do meu sênior online e adicionei algumas funções, que podem ser de ajuda para iniciar
// Este script é uma função decorativa, suporta tabelas nativas, mas não suporta tabelas com outros elementos.
(função ($) {
$ .fn.ManualTable = function (opções) {
var tabid = $ (this) .attr ("id");
var linemove = false;
var currth = nulo;
var opts = $ .extend ({}, $ .fn.ManualTable.Defaults, Opções);
$ (this) .css ({
"*colapso da fronteira": "colapso",
"espaçamento de fronteira": 0,
"Largura": "100%",
"Border": "Solid" + Opts.BerDerColor + "1px",
"Fonte-size": opts.TableFontSize
});
$ ("#" + tabid + "th"). CSS ({
"Antecedentes": opts.thbackcolor,
"Border-left": "Solid" + Opt.BerDerColor + "1px",
"altura": opts.THHEILT,
"cor": opts.thcolor
});
$ ("#" + TABID + "TD"). CSS ({
"Border-left": "Solid" + Opt.BerDerColor + "1px",
"altura": opts.tdheight,
"Border-top": "Solid" + Opt.BerDerColor + "1px",
"preenchimento": "0",
"cor": opts.tdcolor,
"Antecedentes": opts.tdbackColor
});
$ ("#" + tabid + "th: primeiro filho,#" + tabid + "td: primeiro filho"). css ({{
"Border-left": "Nenhum"
});
/*
*/
var str = $ ("#" + tabid + "td"). html ();
$ ("#" + tabid + "td"). html ("<estilo de entrada = 'largura: 100%; borda: nenhum; altura: 100%; alinhamento vertical: médio' valor = '" + str + "' ReadOnly/> ");
$ ("#" + tabid + "entrada"). CSS ({
"Background-color": opts.tdbackcolor,
"cor": opts.tdcolor
});
if (opts.isoddchange) {
$ ("#" + TABID + "TR: Even"). Find ("entrada"). CSS ({
"Background-Color": opts.ChanColor1
});
}
if (opts.ismoveChange == true) {
$ ("#" + TABID + "TR"). Hover (function () {
$ (this) .find ("input"). css ("background", opts.changeColor2);
}, function () {
$ (this) .find ("entrada"). css ("background", opts.tdbackColor);
});
}
$ .ECH ($ ("#" + TABID + "TR"), function () {
for (var i = 0; i <opts.centerIndex.length; i ++) {
$ (this) .find ("input"). Eq (opts.centerIndex [i]). CSS ({
"Text-align": "Center"
});
}
for (var i = 0; i <opts.editindex.length; i ++) {
$ (this) .find ("input"). Eq (opts.editIndex [i]). removeattr ("readonly");
}
});
$ ("corpo"). Anexe ("<div id =/" markline/"style =/" width: 1px; altura: 200px; borda-esquerda: 1px Solid #999; Posição: Absoluto; Display: Nenhum/"> </div> ");
$ ("corpo"). bind ("mousemove", function (evento) {
if (linemove == true) {
$ ("#markline"). CSS ({
"Left": Event.ClientX
}).mostrar();
}
});
$ ("#" + tabid + "th"). bind ("mousemove", function (event) {
$ ("corpo"). Att ({
ONSELECTSTART: "Event.ReturnValue = false"
});
var th = $ (this);
var esquerdo = th.offset (). esquerda;
if (th.prevall (). comprimento <1) {
if ((th.width () - (event.clientx - esquerda)) <4) {
th.css ({
'Cursor': 'Col-Resize'
});
}
outro {
th.css ({
'cursor': 'padrão'
});
}
} else if (th.NexTall (). Comprimento <1) {
if (event.clientX - esquerda <4) {
th.css ({
'Cursor': 'Col-Resize'
});
}
outro {
th.css ({
'cursor': 'padrão'
});
}
} outro {
if (event.clientx - esquerda <4 || (th.width () - (event.clientX - esquerda)) <4) {
th.css ({
'Cursor': 'Col-Resize'
});
}
outro {
th.css ({
'cursor': 'padrão'
});
}
}
});
$ ("#" + tabid + "th"). bind ("mousedown", função (evento) {
var th = $ (this);
var pos = th.offset ();
if (th.prevall (). comprimento <1) {
if ((th.width () - (event.clientx - pos.left)) <4) {
var altura = th.parent (). Parent (). Parent (). Hight ();
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 ();
}
outro {
currth = th;
}
}
} else if (th.NexTall (). Comprimento <1) {
if (event.clientX - pos.left <4) {
var altura = th.parent (). Parent (). Parent (). Hight ();
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 ();
}
outro {
currth = th;
}
}
} outro {
if (event.clientx - pos.left <4 || (th.width () - (event.clientX - pos.left)) <4) {
var altura = th.parent (). Parent (). Parent (). Hight ();
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 ();
}
outro {
currth = th;
}
}
}
});
$ ("corpo"). bind ("mouseup", função (evento) {
$ ("corpo"). Removeattr ("OnSelectStart");
if (linemove == true) {
$ ("#markline"). hide ();
LINEMOVE = FALSO;
var pos = currth.offset ();
var index = currth.prevall (). comprimento;
currth.width (event.clientX - pos.left);
$ (this) .find ("tr"). cada (function () {
$ (this) .Children (). Eq (índice) .Width (event.clientX - pos.left);
});
}
});
$ ("#" + tabid + "tr"). bind (opts.rowstype, opts.rowsClick);
$ ("#" + tabid + "entrada"). bind ("alteração", opts.ChangeAction);
$ ("#" + tabid + "entrada"). foco (função (e) {
$ (this) .css ({
"Border": "Nenhum"
})
});
$ ("#" + tabid + "th"). bind ("mouseup", function (event) {
$ ("corpo"). Removeattr ("OnSelectStart");
if (linemove == true) {
$ ("#markline"). hide ();
LINEMOVE = FALSO;
var pos = currth.offset ();
var index = currth.prevall (). comprimento;
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 o endereço de solicitação remota para edição e atualização de dados (não pode ser permitido)
TableFontSize: "12px",
// Defina o tamanho da fonte da tabela
Thbackcolor: "#005ad2",
// Defina a cor de fundo do cabeçalho da th tht
Thcolor: "#ffff",
// Defina a cor do texto do cabeçalho
Thheight: "30px",
// Defina a altura do cabeçalho
Tdbackcolor: "#fff",
// Defina a cor do fundo TD
Tdcolor: "vermelho",
// Defina a cor do texto TD
TdHeight: "20px",
// Defina altura TD
BorderColor: "#555",
// Defina a cor da linha de borda da tabela
Isoddchange: false,
// Se você deve mudar de cor entrelaçado, isso não pode ser usado ao mesmo tempo em que o mouse desliza a cor da mudança
ChanGecolor1: "#ff0",
// mudanças de cor entrelaçada
Ismovechange: verdadeiro,
// se o slide do mouse muda de cor
ChanGecolor2: "#00f",
// Mudança de cor deslizante do mouse
CenterIndex: [3, 4, 5, 6],
// define o índice de coluna central 0 inicia
EditIndex: [2, 3, 5],
// Defina o índice de coluna editável 0 inicia
// Defina a função de acionador de edição, atualize e salve automaticamente dados
ChangeAction: function () {
var basepath = $ .fn.manualtable.defaults.updataurl;
var tds = $ (this) .Parent (). Parent (). Find ("entrada");
var str = "";
$ .ECH (TDS, função (i) {
str + = str == ""?
});
alerta (baseepath + "?" + str);
// $. Get ($.
// alert (dados);
//});
},
// Defina a função de acionador de edição de linha
IsrowsClick: verdadeiro,
// se deve desencadear
Rowstype: "dblClick",
// Método de gatilho
// Função de gatilho
ROWSCLICK: function () {
alert ($. fn.ManualTable.Defaults.UpDataurl);
}
};
}) (jQuery); </pre> <br>
<pre> </pre>
<br>