emuler css colspan et rowspan

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

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, 10h55

pas mal j'aime bien le principe

clair net et précis ^^

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

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, 08h57

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, 11h58

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, 13h57

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

emuler css colspan et rowspan

Contribuez

Vue hybride

Discussions similaires

Partager

Partager