redimentionnement de table

Version imprimable

bonjours. voila mon probleme:

j'ai un tableau dont j'arrive pas a charger le width, j'ai chercher pendant un bon moment avant de poster. j'ai essaye plusieurs solutions mais aucune ne marche
voici le code dans une classe

Code:

1
2
3
4
5
6
7
this.control =  document.createElement("table");
this.control.className="csstable";
this.control.width = "50em"; // ca ne marche pas
alert(this.control.width) ; // affiche rien
alert(this.control.style);//affiche cssstyledeclaration
alert(this.control.style.width);//n'affiche rien pourtant dans la classe csstable du fichier css
                                        //y a bien une valeur. d'ailleur le css est respecte

je me dis que ca ne marche pas avec table . plus loin j'ai fait ceci pour redimenstionner les td et aussi changer la couleur et ca marche bien:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var myText = document.createTextNode(value);
            var font = document.createElement("font");
            if(cell_color != "default")
            {
                font.style.color = cell_color;
                //alert(this.textColor)
            }
            //
            if(cellWidth != "use_css")
            {
                cell.width =cellWidth;
            }            
 
            font.appendChild(myText); 
 
            cell.appendChild(font);

donc j'arrive a modifier une cellule mais pas le tableau lui meme .
puis avoir de l'aide?

08/01/2010, 12h11
RomainVALERI

Oui c'est troublant cette histoire :?
Tu rencontres ce bug sur FF aussi ? ou seulement IE ?
08/01/2010, 12h21
vermine

C'est les soldes!
Bonjour,

Et en déterminant un pourcentage ?
Code:

1 2 width="50%"
Ou bien je reviens sur ma première idée:
Code:

1 2 this.control.style.width = "50em";
08/01/2010, 12h21
kernelfailure

Ce ne serait pas plutôt des unités en 'px' ou '%' ?
08/01/2010, 13h12
Bovino

Citation:

Envoyé par kernelfailure

Ce ne serait pas plutôt des unités en 'px' ou '%' ?

Effectivement, les valeurs de l'attribut width sont soit en pixels (et dans ce cas l'unité n'est pas spécifiée) soit en %.
Donc pas de em.
08/01/2010, 16h13
vacknov

Pourquoi ne pas faire plus simple ?

du genre :

Code:

this.setAttribute("width","50%");
08/01/2010, 17h02
lilington
j'ai le probleme avec ff3.5 et IE8

ca ne marche pas aussi bien avec em que px et %

de plus c'est bizzar que vous me le disiez car dans mon .css j'ai
Code:

1 2 3 4 5 .myTable { ...... width:40em; }
et justement j'ai vu quelque par en cherchant des infos sur em que on pouvait entierement ce passer de px et le remplacer par em.

this.control.setAttribut(); ne fait absolument rien.
08/01/2010, 20h07
Invité

jour

et en mettant

Code:

this.control.style.width = 50+"em"
08/01/2010, 21h27
Bovino
Citation:
Envoyé par lilington

j'ai le probleme avec ff3.5 et IE8

ca ne marche pas aussi bien avec em que px et %

de plus c'est bizzar que vous me le disiez car dans mon .css j'ai

Code:

1 2 3 4 5 .myTable { ...... width:40em; }

et justement j'ai vu quelque par en cherchant des infos sur em que on pouvait entierement ce passer de px et le remplacer par em.

this.control.setAttribut(); ne fait absolument rien.
Attention, l'attribut HTML width n'a rien à voir avec la propriété CSS width.
Comme déjà dit, l'attribut (déprécié) width accepte comme valeurs des pixels (sans indication d'unité) ou des %, la propriété de style accepte comme valeur des pixels (avec précision de l'unité), des em, des ex, des %, des pt.
Mais la première est accessible via la propriété width de l'objet HTML table en JavaScript alors que la seconde est accissible depuis la propriété style.width
08/01/2010, 21h33
kernelfailure
Citation:
Envoyé par lilington

j'ai le probleme avec ff3.5 et IE8

ca ne marche pas aussi bien avec em que px et %

de plus c'est bizzar que vous me le disiez car dans mon .css j'ai

Code:

1 2 3 4 5 .myTable { ...... width:40em; }

et justement j'ai vu quelque par en cherchant des infos sur em que on pouvait entierement ce passer de px et le remplacer par em.

this.control.setAttribut(); ne fait absolument rien.
C'est à dire que obj.width, c'est pas du css.
En l'occurence, la spec du W3C pour la propriété width d'une TABLE est qu'il s'agit d'un %Length, qui est exprimé soit en pixels (n), soit en pourcentage (n+'%').

[EDIT]
A quelques minutes d'écart, on dit la même chose :lol:

bon je m'explique un peu mieux d'ailleur ptre que il y a un defaut dans mon code que je ne vois pas moi meme alors je vais en poster plus.

Ce que je fait c'est un sorte de mini librairie a la EXT en me basant sur le tuto conception de tableau editable j'y ajoute en faite quelque petit truc genre store pour stocker les donnees sql gestion de couleurs .... voici a quoi ressemble le code a l'utilisation.
fichier .php

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
<?php 
  //gestion de session etc...
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <script type="text/javascript" src="./scripts/EditTable.js">; </script>
    <script type="text/javascript" src="./scripts/DataStore.js">; </script> 
    <link rel="stylesheet" type="text/css" href="./skin/default-silver/default-silver.css"/>
  </head>
  <body>
    <script>  
      var table = new CW_EditTable({
        X:8,
        Y:5,
        //textColor:"red",
        cellWidth:150,
        data: [
          "15/09/2008", "12/20", "15/20", "9.5/20", "17/20", "2/20", "23/30", "95/100", 
          "02/10/2008", "15.5/20", "13.5/20", "7/20", "16/20", "2/20", "19/30", "96/100", 
          "25/10/2008", "11.5/20", "13/20", "10/20", "16/20", "2/20", "22/30", "97/100", 
          "09/11/2008", "18/20", "16/20", "10.5/20", "18.5/20", "2/20", "25/30", "98/100", 
          "29/11/2008", "17/20", "17/20", "9/20", "19/20", "2/20", "26/30", "99.5/100"
        ],
        caption:"Relevé de note de Mr. X - 1er trimestre 2009",
        head: ["Date","Francais","Anglais","Maths", "Physique", "Histoire", "Géographie", "E.P.S."],
        foot:"blabla"
      });
      table.AppendTo(document.body); 
 
 
    </script>
    <br/>
    <input type="button" value="Export" onclick="document.getElementById('zone').value = table.AllData().join(',')"/>
    <br/>
    <textarea id="zone" style="width:45em;height:10em;"></textarea>
  </body>
</html>

je rentrerai pas dans les details de la classe store car le problemes c'est mon redim de tableau. donc voila comment commence la classe :

fichier EditTable.js

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var CW_EditTable = function (){
    this.control =  document.createElement("table");          // create a table element thant parse value to contol
    this.control.cellPadding = 0;
    this.control.cellSpacing = 0;
    this.datas = [];
 
    /*style*/
    this.control.className = "EditTable";              //slect a css class for the whole class
    this.textColor = "default";
    this.numCellWidth = "30em";
    this.CellWidth = "use_css";
 
    if (arguments.length > 0)
    {
        this.Build(arguments[0]);                             //if new instance as call this argument then renderit
    }
 
 
};
 
 /*
 * all function inside this class are here
 */
CW_EditTable.prototype =                                     // all function of this class
{
 /*
 * build is used to parse value to all attribut of the class
 */
    Build:function()                      
    {
        if(arguments.length > 0)
        {
            this.Clean();
            var o = arguments[0];
            /*
             *  variable
            */         
            if(o.store)
            {
                this.nRows = o.store.rows;
                this.nCols = o.store.cols;                
 
                for(var i=0,imax=o.columns.length ;i<imax;i++)
                {
                    //var nvfield = 0;
                    for(var j = 0,jmax=o.store.cols;j<jmax;j++)
                    {
                        if(o.columns[i].dataindex == o.store.fields[j].dataindex)
                        { 
                           var tmp = {
                                values:[],
                                header:"",
                                id:"",
                                type:"",
                                dataindex:"",
                                textcolor:"default",
                                bgcolor:"use_css",
                                hidden:false,
                                width:"use_css"
                            };
                            tmp.header = o.columns[i].header;
                            tmp.id
                            tmp.type=o.store.fields[j].type;
                            tmp.dataindex = o.columns[i].dataindex;
                            tmp.values = o.store.fields[j].values;
 
                            if(o.columns[i].width) tmp.width = ""+o.columns[i].width+"em"; 
                            if(o.columns[i].textcolor)  tmp.textcolor = o.columns[i].textcolor;
                            if(o.columns[i].bgcolor) tmp.bgcolor = o.columns[i].bgcolor;
                            if(o.columns[i].hidden) tmp.hidden = o.columns[i].hidden;
                            if(o.columns[i].id) tmp.id = o.columns[i].id;
 
 
                            this.fields.push(tmp);
                            //tmp.values =[];
                            tmp = {};
                            break;
                        }
                    }
                }                
 
            }
 
            this.Dimensions(o); 
            /*
             *  style properties
            */
            if(o.textColor)
            {
                this.textColor = o.textColor;
            }
            if(o.cellWidth)
            {
                this.CellWidth = ""+o.cellWidth+"em";
                //alert(this.CellWidth);
            }   
 
            if(o.caption){
                this.caption = o.caption;
            }
            if(o.foot)
            {
                this.foot = o.foot;
            }
            this.Populate(); 
 
        }
    },

notez que j'ai commenter les this.control.width

voyons le fichier.css

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
.EditTable
{
    table-layout:auto;                 
    background-color: #FFFFFF;
    border-left:1px solid #999999;
    border-bottom:1px solid #999999;
    width:20em;
}
 
.EditTable tbody td
{
    font-family: sans-serif;
    border-left: 1px solid #DEDEDE;
    border-top: 1px solid #DEDEDE;
    padding-right: 2px;
    vertical-align: middle;
    white-space: nowrap;
    text-align: left;
    font-size: 0.7em;
    background-color: #EEEEEE;
}
 
.EditTable thead td
{
    text-align: center; 
    background-color: #EEEEEE;
    border-left: 1px solid #CDCDCD;
    border-bottom : 1px solid #BBBBBB;
    color: black;
    font-weight: bold;
    font-family: fantasy;
    font-size: 0.7em;
}
 
.EditTable caption
{
    text-align: center;
    background-image: url('./image/bgsylver.png');
    background-repeat:repeat-x ;
    white-space: nowrap;
    font-weight: bold;
    padding-top: 0.3em;    
    vertical-align: middle;
    font-size: 0.8em;
    height: 2em;
}

en faite si dans le css j'efface width:20em;
le tableau se redimensionne comme je le souhaite selon les donnees. le probleme est justement que si il y a peu de donner il devient laid avec IE et monstrueux avec FF,Opera,Chrome et safarie qui ont un comportement plus ou moins identique.
donc ce que je cherche a faire c'est dans la fonction dimension verifier la taille de donnees calculer la nouvelle taille si < a taille par minimal alors mettre une taille par defaut et donc mon fichier css n'aura plus besoin de width.

NB: le travail n'est pas fini encore et vous pouver constater que tout est public pour le MOMENT il doit y avoir aussi d'autre defaut.