emuler css colspan et rowspan

Version imprimable

colspan et rowspan n'existent pas en css...
Voici un petit script pour y remédier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
function init(){
	tabtds=document.getElementsByTagName('td')
	var i=-1;
	while(tabtds[++i]){
		spanrule=/((row)|(col))span(\d+)/.exec(tabtds[i].className)
		if (spanrule){
		     switch(spanrule[1]){
		      	case ("row"): 	tabtds[i].rowSpan=spanrule[4];
	   			  				  	break;
	   	  		case ("col"): 	tabtds[i].colSpan=spanrule[4];
     		}
 
	 	}
	 }
}
</script>
</head>
<body onload="init()">
<table border="1" width="100%">
  <tr>
    <td  class="rowspan2">&nbsp;</td>
    <td  class="rowspan2">&nbsp;</td>
    <td  class="colspan2">&nbsp;</td>
    <td  class="rowspan2">&nbsp;</td>
    <td  class="rowspan2">&nbsp;</td>
    <td  class="rowspan2">&nbsp;</td>
    <td  class="rowspan2">&nbsp;</td>
    <td  class="rowspan2">&nbsp;</td>
    <td  class="colspan2">&nbsp;</td>
  </tr>
  <tr>
    <td  class="colspan2">&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>
</table>
 
</body>
 
</html>

ça permet juste de tout gérer pas le class plutot que d'avoir un attribut séparé ...

20/05/2010, 09h55
le_chomeur

pas mal j'aime bien le principe :) clair net et précis ^^
20/05/2010, 21h02
Auteur
ce qui me gène dans ce code c'est que tu es obligé de détourné la fonction première de l'attribut class :?

Le code fonctionne si plusieurs styles sont appliqués sur la balise ?
Code:

1 2 <td class="style_quelconque rowspan2 style_ligne"> </td>
Sinon on ne peut pas créer ses attributs ?
Code:

1 2 <td monAttribut="rowspan2"> </td>
21/05/2010, 07h57
Bovino
Citation:
Envoyé par Auteur

Le code fonctionne si plusieurs styles sont appliqués sur la balise ?

Code:

1 2 <td class="style_quelconque rowspan2 style_ligne"> </td>

Sinon on ne peut pas créer ses attributs ?

Code:

1 2 <td monAttribut="rowspan2"> </td>
Normalement oui, la regexp vérifie uniquement que le nom de classe contient colspan ou rowspan

Code:

spanrule=/((row)|(col))span(\d+)/.exec(tabtds[i].className)
23/05/2010, 10h58
SpaceFrog

Détourner l'attribut class est un des principes de base de jquery... personne ne s'en plaint...

Oui ce code focntionne si le class compore plusieurs rules.
La regExp detecte si l'attribut class comporte rowpsanx ou colspanx je pourrais paufiner pour ne pas matche un eventuel monrowspanx ...

Pour ce qui est de rajouter des attributs persos, oui on peu, mais on sort du w3c valide.
23/05/2010, 12h57
Bovino

Citation:

Envoyé par SpaceFrog

Détourner l'attribut class est un des principes de base de jquery... personne ne s'en plaint...

+1 Spaffy, notons aussi que l'apparition récente de la méthode getElementsByClassName pour les principaux navigateurs tendrait à montrer que l'on s'éloigne un peu d'une vision purement CSS de l'attibut class ;)

Bonsoir.

Encore une idée super géniale signée SPaceFrog ! :ccool: :king:

Non, je n'ai pas fait un plug-in !

Mais bien entendu j'ai « jquerisé ». Avec une petite amélioration, voir les commentaires.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* * Cette adaptation permet de définir un rowspan et * un colspan en même temps. */ $("td").each(function(i, item){ var str = item.className; var rowrule = /(rowspan)(\d+)/.exec(str); var colrule = /(colspan)(\d+)/.exec(str); if (rowrule != null){ item.rowSpan = rowrule[2]; } if (colrule != null){ item.colSpan = colrule[2]; } });
[EDIT 2010-05-24 07:38]

Impossible de résister plus longtemps, je commence la rédaction du plug-in spacefrogRule ! ;)

[EDIT 2010-05-24 10:05]

C'est ici : http://danielhagnoul.developpez.com/...cefrogRule.php