emuler css colspan et rowspan

**SpaceFrog** · 19/05/2010, 14h02

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é ...

**le_chomeur** · 20/05/2010, 09h55

pas mal j'aime bien le principe

clair net et précis ^^

**Auteur** · 20/05/2010, 21h02

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sinon on ne peut pas créer ses attributs ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<td monAttribut="rowspan2">&nbsp;</td>

**Bovino** · 21/05/2010, 07h57

Envoyé par Auteur

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sinon on ne peut pas créer ses attributs ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<td monAttribut="rowspan2">&nbsp;</td>

Normalement oui, la regexp vérifie uniquement que le nom de classe contient colspan ou rowspan

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

spanrule=/((row)|(col))span(\d+)/.exec(tabtds[i].className)

**SpaceFrog** · 23/05/2010, 10h58

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.

**Bovino** · 23/05/2010, 12h57

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

**danielhagnoul** · 23/05/2010, 21h46

Bonsoir.

Encore une idée super géniale signée SPaceFrog !

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

emuler css colspan et rowspan

Contribuez

Discussions similaires

Partager

Partager