tableau avec jquery

[alen22]

salut,


je veux savoir est ce que c'est possible de créer un tableau dynamique avec jquery

en html si on fait appel à ce tableau

Code :

1
2
<table id="tbl">
</table>

merci d'avance

[SpaceFrog]

jqgrid ?

[alen22]

merci pour la réponse

mais le problème est comment l'adopter dans mon besoin

car le contenu de tableau creé est relier au fichier test.xml

bref au contenu de ce fichier

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
<?xml version="1.0" encoding="UTF-8"?>
<societes>
   <societe>
      <nom>HP</nom>
      <nombre>10</nombre>
      <equipe>
          <specialite>DEV</specialite>
          <nombreequipe>36</nombreequipe>
           <local>parix</local>
           <etat>marche</etat>
    </equipe>
     <equipe>
          <specialite>finance</specialite>
          <nombreequipe>26</nombreequipe>
           <local>nework</local>
           <etat>arret</etat>
    </equipe>
 
   </societe>
 <societe>
      <nom>IBM</nom>
      <nombre>40</nombre>
      <equipe>
          <specialite>marketing</specialite>
          <nombreequipe>68</nombreequipe>
          <local>london</local>
          <etat>arret</etat>
    </equipe>
    <equipe>
          <specialite>comerce</specialite>
          <nombreequipe>88</nombreequipe>
          <local>germani</local>
          <etat>marche</etat>
    </equipe>
 
 
 
</societes>

le but apres bien sur creer une liste deroulante(qui contient les nom des societe :HP et IBM) (j'arrive a créer cette liste c'est simple)

est quand je choisie par exemple HP elle m'affiche un tableau a 4 colonnes (specialite,nombreequipe,local,etat)


les colonnes sont relier a l'équipe de société sélectionné

exemple de scenario d'exécution si je choisie HP
le tableau dois être comme suit

specialite nombreequipe local etat

DEV 36 parix marche
finance 26 nework arret


le problème est que le nombre des lignes dépend des nombres des équipes de la societe sélectionné

pour calculer les nombres des équipes de société sélectionné est

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
$(document).ready(function(){
 
				$('#list').change(function(){
 
 
 
 
				var valeur=$(this).val();
 
 
 
                                var cont=0;
 
$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
 
cont++;// cette ligne calcul les nombre d'equipe lié au chois de depart
 
						 });
 
  }
 });
 });

mais pour remplir le tableau moi j'essaye avec ce code

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
$(document).ready(function() {
 
       createDynamicTable($("#tbl"), cont, 4);
 
   });
 
$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
 
 
 
 
 
 function createDynamicTable(tbody, rows, cols) {
 
         if (tbody == null || tbody.length < 1) return;
 
           for (var r = 1; r <= rows; r++) {
 
               var trow = $("<tr>");
for (var c = 1; c <= cols; c++) {
contVal1=$(item2).children("specialite").text(); 
 
contVal2=$(item2).children("nombreequipe").text(); 	
 
contVal3=$(item2).children("local").text(); 	
					contVal4=$(item2).children("etatl").text(); 
$("<td>")
.text(contVal1,contVal2,contVal3,contVal4)
 
                          .data("col", c)
 
                          .appendTo(trow);
 
              }
 
             trow.appendTo(tbody);
 
         }
 
    }   
 
 
 
 
 
 
 
 
 
 
 
 
 
 });
 
  }
 });
 });

c'est sur que cette solution est incorrecte car elle est différent à ce que vous dite " jqgrid"


merci de m'aidez à corriger ce code

[SpaceFrog]

jqgrid est directement reliable en datasource à un fichier xml

[alen22]

mais en se basant sur code

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
$(document).ready(function(){
 
				$('#list').change(function(){
 
 
 
 
				var valeur=$(this).val();
 
 
 
 
 
$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
 
.......
.....
.....
.......

comment utilisant cette notion de "jqgrid " pour compléter ce code

tous ce code je dois l'intégrer dans une page .jsp

[tresorunikin]

vas d'abord voir jqgrid et sa doc. Elle parait explicite

[alen22]

merci pour votre réponse
j'ai déjà consulter des doc sur le net pour ce plugin


mais franchement ca apparait difficile
autre choses il parait que "jqgrid " est adopter pour php et .net et moi je travail avec des pages jsp

vous avez un aperçu sur mon objectif attendu de ce plugin
(la création du tableau avec comme contenu :les données récupérées de fichier test.xml)

si possible pouvez me donnez juste le debut de code avec jqgrid bien sur je pense que ce code dois etre apres

Code :

$('#list').change(function(){

puisque tous est dépend de la chois de la liste

[alen22]

personne n'a aucune idée sur "jqgrid"

juste une idée sur le code en utilisant cette notion(jqgrid)


merci d'avance

[tresorunikin]

Là tu vas faire du javascript pur!!! Sinon JqGrid facilite la tâche et t'évite de te taper sur le nerf au cas où tu changeais la source des données; d'où t'as intérêt à t'y pencher
Pour créer un élément (tableau, span, etc) la fonction magique est

Code :

  var maTable = document.createElement("TABLE");

t'as aussi le choix entre

Code :

1
2
3
4
5
6
7
 
  var monTitre =  document.createElement("CAPTION");
  var monHead=document.createElement("THEAD");
 var corpsDeTable= document.createElement("TBODY");
 var piedDeTable= document.createElement("TFOOT");
  var LigneDeTable=document.createElement("TR");
  var CelluleDeTable=document.createElement("TR");

Pour ajouter un élément à un autre, utilise

Code :

appendChild(objetElementAjoutable);

On y va pour un tableau de dimension 50%, à 2 lignes et 3 colonnes

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    var i, j,objetLigne,objetCellule;
     objetTable.bgColor="#efefef";
    objetTable.setAttribute("width","50%");
 
  for (i=0; i<2; i++)
  {
    objetLigne = document.createElement("TR");
    objetTable.appendChild(objetLigne);
    for (j=0; j<3; j++)
    {
      objetCellule = document.createElement("TD");
      objetCellule.innerHTML = "Un truc de ton node xml";
      objetLigne.appendChild(objetCellule);
    }
  }
  $("#tabContainer").appendChild(objetTable);

Voilà, g pas essayé mais c'est juste pour te donner une idée! Avec le souci de voir un Resolu à la prochaine visite