Afin de répondre à une question le week-end, j'ai écrit un tas de code et les fonctions ont été essentiellement mises en œuvre, mais je sentais que la structure était trop pauvre et je n'y ai pas beaucoup pensé. Pas joli du tout
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title> Le titre du document </TITME>
<Meta Charset = UTF-8>
<script src = "lib / jquery-1.8.1.min.js" type = "text / javascript"> </ script>
<style type = "text / css">
tableau{
Espacement des bordures: 0;
}
td {
hauteur: 50px;
Largeur: 50px;
Espacement des bordures: 0;
}
.caché{
Affichage: aucun;
}
</ style>
</ head>
<body>
<ballage>
<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>
<Button Type = "Button" onClick = "Combine ()"> Hebing </ftont>
<script type = "text / javascript">
var selectECDLog = [];
var resultlen = 0;
var resultbegin = 0;
var backcolor = [«rouge», «vert», «bleu»]; // Supposons 3 rangées 1 -Rred 2 - Green 3 - Bleu
var resultColor = 0;
$ ("td"). Mousedown (function () {
selectecdlog = [];
resultColor = backColor [$ (this) .parent (). att ('id'). substr (1) -1];
$ ('td'). CSS ('Background-Color', 'White');
// ID pour la balise tr
//alert($( This).parent().attr('id '));
// Obtenez la colonne n °
//alert($( This).index()+1);
$ (this) .css ('background-color', resultColor);
selectecdlog.push ($ (this) .attr ('id'));
//alert($( This ).attr('id '));
$ ("td"). MouseUp (onMouseUp);
$ ("td"). MouseOver (OnMouseOver);
})
fonction onMouseUp () {
/ * Agir sur l'événement * /
var len = resultlen = math.abs (parseInt (selectecdlog [0] .substr (selectECDLog [0] .Indexof ('C') + 1))) - paSeInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). index ('c')) + 1))) + 1;
var begin = resultbegin = parseInt (selectecdlog [0] .substr (selectecdlog [0] .Indexof ('C') + 1))> paSeInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexof ('c')) + 1))? parseInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexof ('c')) + 1));
pour (var i = 0; i <resultlen; i ++)
{
selectecdlog.push (selectecdlog [0] .substr (0,2) + "c" + (resultBegin + i));
}
selectecdlog.shift ();
$ ('# log'). texte (selectecdlog.toString ());
$ ("TD"). Unbind ('Mouseover', OnMouseOver);
$ ("TD"). Unbind ('MouseUp', OnMouseUp);
}
fonction onMouseOver (argument) {
var len = resultlen = math.abs (parseInt (selectecdlog [0] .substr (selectECDLog [0] .Indexof ('C') + 1))) - paSeInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). index ('c')) + 1))) + 1;
var begin = resultbegin = parseInt (selectecdlog [0] .substr (selectecdlog [0] .Indexof ('C') + 1))> paSeInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexof ('c')) + 1))? parseInt ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexof ('c')) + 1));
$ ('td'). CSS ('Background-Color', 'White');
pour (var i = 0; i <len; i ++)
{
$ ('#' + selectecdlog [0] .substr (0,2) + "c" + (begin + i)). css ('background-color', resultColor);
}
// alert ($ (this) .attr ('id'). substr (($ (this) .attr ('id'). indexof ('c')) + 1));
//$('#'+TDID).css('background-Color ',' Red ');
}
// Définit ID ATRT pour chaque TD
$ ("td"). Chaque (fonction (index, val) {
/ * itérer via le tableau ou l'objet * /
$ (this) .attr ('id', $ (this) .parent (). att ('id') + "c" + ($ (this) .index () + 1))});
// combiner les cellules
fonction combine (argument) {
// corps...
pour (var m dans selectecdlog)
{
if (m == 0)
{
$ ('#' + selectecdlog [m]). att ('Colspan', resultlen);
$ ('#' + selectecdlog [m]). css ('width', resultlen * 50 + "px");
//$('#'+SelecTecdlog@m Dalle).css('background-Color ',' Bule ');
}
autre{
$ ('#' + selectecdlog [m]). addClass ('Hidden');
}
}
}
</cript>
</docy>
</html>