Para responder una pregunta el fin de semana, escribí un montón de código y las funciones se implementaron básicamente, pero sentí que la estructura era demasiado pobre y no pensé mucho en ello. No es bonito en absoluto
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> El título del documento </title>
<meta charset = utf-8>
<script src = "lib/jQuery-1.8.1.min.js" type = "text/javaScript"> </script>
<style type = "text/css">
mesa{
espaciado fronterizo: 0;
}
TD {
Altura: 50px;
Ancho: 50px;
espaciado fronterizo: 0;
}
.oculto{
Pantalla: ninguno;
}
</style>
</ablo>
<Body>
<Table>
<tr 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 = "r2">
<TD> </td>
<TD> </td>
<TD> </td>
<TD> </td>
<TD> </td>
<TD> </td>
<TD> </td>
<TD> </td>
<TD> </td>
<TD> </td>
</tr>
</table>
<p id = 'log'> </p>
<botón type = "botón" onClick = "combine ()"> hebebing </boton>
<script type = "text/javaScript">
var selectecdlog = [];
VAR resultlen = 0;
VAR resultBegin = 0;
var backColor = ['rojo', 'verde', 'azul']; // Suponga 3 filas 1 -Red 2 - Verde 3 - Azul
var resultColor = 0;
$ ("TD"). MouseDown (function () {
selectEcdLog = [];
resultColor = backColor [$ (this) .parent (). attr ('id'). substr (1) -1];
$ ('Td'). CSS ('Color de fondo', 'blanco');
// id para TR TAG
//alert($(THIS).PARENT().Attr('id '));
// Obtén la columna No.
//alert($(this).index()+1);
$ (this) .css ('Color de fondo', resultColor);
selectecdlog.push ($ (this) .attr ('id'));
//alert($(this).Attr('id '));
$ ("TD"). MouseUp (OnMouseUp);
$ ("TD"). Mouseover (OnMouseOver);
})
function onMouseUp () {
/ * Actuar sobre el evento */
var len = resultlen = Math.abs (parseInt (selectecdlog [0] .substr (selectecdlog [0] .indexof ('c')+1))) - parseInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). índicef ('c')+1)))+1;
var begin = resultBegin = parseInt (selectecdlog [0] .substr (selectecdlog [0] .indexof ('c')+1))> parseInt ($ (this) .attr ('id'). subStr (($ (this) .Attr ('id'). indexOf ('c')+1))? parseInt ($ (this) .attr ('id'). subStr (($ (this) .attr ('id'). indexOf ('c'))+1));
para (var i = 0; i <resultlen; i ++)
{
selectecdlog.push (selectecdlog [0] .substr (0,2)+"c"+(resultBegin+i));
}
selectecdlog.hift ();
$ ('#log'). Text (selectecDlog.ToString ());
$ ("TD"). Unbind ('Mouseover', OnMouseOver);
$ ("TD"). Unbind ('MouseUp', OnMouseUp);
}
función en mouseover (argumento) {
var len = resultlen = Math.abs (parseInt (selectecdlog [0] .substr (selectecdlog [0] .indexof ('c')+1))) - parseInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). índicef ('c')+1)))+1;
var begin = resultBegin = parseInt (selectecdlog [0] .substr (selectecdlog [0] .indexof ('c')+1))> parseInt ($ (this) .attr ('id'). subStr (($ (this) .Attr ('id'). indexOf ('c')+1))? parseInt ($ (this) .attr ('id'). subStr (($ (this) .attr ('id'). indexOf ('c'))+1));
$ ('Td'). CSS ('Color de fondo', 'blanco');
para (var i = 0; i <len; i ++)
{
$ ('#'+selectecdlog [0] .substr (0,2)+"c"+(begin+i)). CSS ('Color de fondo', resultColor);
}
// alerta ($ (this) .attr ('id'). subStr (($ (this) .attr ('id'). indexOf ('c'))+1));
//$('#'+tdid).css('Background-Color ',' rojo ');
}
// Establecer ATTR de identificación para cada TD
$ ("td"). Cada (función (índice, val) {
/ * iterar a través de una matriz u objeto */
$ (this) .attr ('id', $ (this) .parent (). attr ('id')+"c"+($ (this) .index ()+1))});
// Combinar células
función combinar (argumento) {
// cuerpo...
para (var m en selectecdlog)
{
if (m == 0)
{
$ ('#'+selectecdlog [m]). attr ('colspan', resultado);
$ ('#'+selectecdlog [m]). CSS ('Width', resultado*50+"Px");
//$('#'+Selectecdlogighmfont>).css('Background-Color ',' Bule ');
}
demás{
$ ('#'+selectecdlog [m]). addClass ('Hidden');
}
}
}
</script>
</body>
</Html>