Para responder a uma pergunta no fim de semana, escrevi um monte de código e as funções foram basicamente implementadas, mas senti que a estrutura era pobre demais e não pensei muito nisso. De jeito nenhum
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<Title> O título do documento </title>
<meta charset = utf-8>
<script src = "lib/jQuery-1.8.1.min.js" type = "text/javascript"> </script>
<style type = "text/css">
mesa{
espaçamento de borda: 0;
}
TD {
Altura: 50px;
Largura: 50px;
espaçamento de borda: 0;
}
.escondido{
Exibir: Nenhum;
}
</style>
</head>
<Body>
<tabela>
<tr id ID = "R1">
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</tr>
<tr id ID = "R2">
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</tr>
</tabela>
<p id = 'log'> </p>
<button type = "button" onclick = "Combine ()"> hebing </botão>
<script type = "text/javascript">
var selectecdLog = [];
var resultLen = 0;
var resultbegin = 0;
var backcolor = ['vermelho', 'verde', 'azul']; // assume 3 linhas 1 -Red 2 - Verde 3 - Azul
var resultColor = 0;
$ ("TD"). Mousedown (function () {
selectecdlog = [];
resultadocolor = backcolor [$ (this) .parent (). att ('id'). substr (1) -1];
$ ('TD'). CSS ('Background-Color', 'White');
// id para tag TR
//alert($(this).parent().attr('id '));
// Obtenha o número da coluna
//Alert(ical(this).index()+1);
$ (this) .css ('cor de fundo', resultadocolor);
selectecdLog.push ($ (this) .attr ('id'));
//alert($(this).attr('id '));
$ ("td"). mouseup (onmouseup);
$ ("TD"). MouseOver (onMouseOver);
})
função onMouseUp () {
/ * Aja no evento */
var len = resultlen = Math.abs (parseint (selectEcdlog [0] .Substr (selectecdlog [0] .IndexOf ('c')+1))) - parseint ($ (this) .attr ('id'). Substr (($) .Attr ('id').
var begin = resultBegin = parseInt (selectEcdlog [0] .Substr (selectEcdlog [0] .IndexOf ('c')+1))> parseint ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). parseint ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexOf ('c'))+1));
for (var i = 0; i <resultadolen; i ++)
{
selectecdLog.push (selectecdlog [0] .substr (0,2)+"c"+(resultadobegin+i));
}
selectecdLog.shift ();
$ ('#log'). Texto (selectecdLog.toString ());
$ ("td"). Unbind ('mouseOver', onmouseover);
$ ("td"). Unbind ('mouseup', onmouseup);
}
função onMouseOver (argumento) {
var len = resultlen = Math.abs (parseint (selectEcdlog [0] .Substr (selectecdlog [0] .IndexOf ('c')+1))) - parseint ($ (this) .attr ('id'). Substr (($) .Attr ('id').
var begin = resultBegin = parseInt (selectEcdlog [0] .Substr (selectEcdlog [0] .IndexOf ('c')+1))> parseint ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). parseint ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexOf ('c'))+1));
$ ('TD'). CSS ('Background-Color', 'White');
for (var i = 0; i <len; i ++)
{
$ ('#'+selectEcdlog [0] .Substr (0,2)+"C"+(BEGIN+I)). CSS ('cor de fundo', resultadocolor);
}
// alert ($ (this) .attr ('id'). substr ((($ (this) .attr ('id'). indexof ('c'))+1));
//$('#'+tdid).css('background-color ',' vermelho ');
}
// Defina o ID ATTR para cada TD
$ ("td"). cada (função (índice, val) {
/ * Itere através da matriz ou objeto */
$ (this) .attr ('id', $ (this) .parent (). att ('id')+"c"+($ (this) .index ()+1))});
// Combine células
Função Combine (argumento) {
// corpo...
para (var m no selectecdlog)
{
if (m == 0)
{
$ ('#'+selectEcdlog [m]). Att ('Colspan', resultado);
$ ('#'+selectEcdlog [m]). CSS ('largura', resultado*50+"px");
//$('#'+SelectecdLogOM] ).css('background-color ',' bule ');
}
outro{
$ ('#'+selectecdlog [m]). addclass ('hidden');
}
}
}
</script>
</body>
</html>