Créer un lien sur chaque ligne d'un tableau

Version imprimable

salut a vous. pour créer des lignes et des cellules dans un tableau . je procède comme-ci :

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
 
function readData(sData) {
    var data = sData.trim().split('$');
    var cell , ligne ;
    var tableau = document.getElementById("tableau");
    for ( var i = 0; i < data.length; i++) {
        var x_data = data[i].split(',');
        for ( var j = 0; j < x_data.length; j++) {
        }
        if (x_data[x_data.length - 1] == ']') {
            x_data.splice(x_data.indexOf(']'), 1);
        }
        if (x_data.length == 0) {
 
        } else {
 
            var site_name = x_data[0] ;
            var tn = x_data[1];
            var ttn = x_data[2];
            var ne = x_data[3];
            var year = x_data[4];
            var program = x_data[5];
            var rbs = x_data[6];
            var mkting = x_data[7];
            var province = x_data[8];
            var administrative_region = x_data[9];
            var town = x_data[10];
            var longitude = x_data[11];
            var latitude = x_data[12];
            var wimax = x_data[13];
            var operationnal = x_data[14];
            var identifiants = x_data[15];
            var capacite = x_data[16];
            var tru = x_data[17];
 
            ligne = tableau.insertRow(-1);
 
 
 
           cell = ligne.insertCell(0);
           cell.innerHTML = identifiants ;
 
           cell = ligne.insertCell(1);//on a une ajouté une cellule
           cell.innerHTML = site_name;
 
           cell = ligne.insertCell(2);//on a une ajouté une cellule
           cell.innerHTML = tn ;
 
           cell = ligne.insertCell(3);//on a une ajouté une cellule
           cell.innerHTML = ttn ;
 
           cell = ligne.insertCell(4);//on a une ajouté une cellule
           cell.innerHTML = ne ;
 
           cell = ligne.insertCell(5);//on a une ajouté une cellule
           cell.innerHTML = year ;
 
           cell = ligne.insertCell(6);//on a une ajouté une cellule
           cell.innerHTML = program ;
 
           cell = ligne.insertCell(7);//on a une ajouté une cellule
           cell.innerHTML = rbs ;
 
           cell = ligne.insertCell(8);//on a une ajouté une cellule
           cell.innerHTML = wimax ;
 
           cell = ligne.insertCell(9);//on a une ajouté une cellule
           cell.innerHTML = operationnal ;
 
           cell = ligne.insertCell(10);//on a une ajouté une cellule
           cell.innerHTML = mkting ;
 
           cell = ligne.insertCell(11);//on a une ajouté une cellule
           cell.innerHTML = province ;
 
           cell = ligne.insertCell(12);//on a une ajouté une cellule
           cell.innerHTML = administrative_region ;
 
           cell = ligne.insertCell(13);//on a une ajouté une cellule
           cell.innerHTML = town;
 
           cell = ligne.insertCell(14);//on a une ajouté une cellule
           cell.innerHTML = longitude ;
 
           cell = ligne.insertCell(15);//on a une ajouté une cellule
           cell.innerHTML = latitude ;
 
           cell = ligne.insertCell(16);//on a une ajouté une cellule
           cell.innerHTML = capacite ;
 
           cell = ligne.insertCell(17);//on a une ajouté une cellule
           cell.innerHTML = tru;   
 
        }
    }
 
    }

mon objectif est de placer un lien sur chaque ligne du tableau de telle sorte que je puisse cliquer dessus et générer ainsi une fenêtre . je ne sais trop comment m'y prendre pour creer des liens avec javascript. veuillez m'aider . SVP

30/11/2013, 15h12
NoSmoking

Bonjour,
affecte directement ton événement sur la TR que tu connais au moment de la création de celle ci.

Pour info il y a moyen de sacrément simplifier ta fonction, mais c'est autre chose.
02/12/2013, 11h33
bza88

autre fonction

c'est quoi cette autre fonction dont tu parles

La fonction à laquelle je faisais allusion est une fonction simplifiée de la tienne qui permet dans une boucle de créer/renseigner des cellules de tableau ajoutées.

On crée un tableau de position qui représente la position de la cellule dans laquelle va se positionner le prochain champ extrait de ta sData.

Code:

var pos = [15, 0, 1, 2, 3, 4, 5, 6, 13, 14, 7, 8, 9, 10, 11, 12, 16, 17];

en somme dans la 1er cellule on met data[15], dans la 2nd on met data[0] et ainsi de suite, il ne reste plus qu'à boucler

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
function readData(sData) {
  // le tableau des positions
  var pos = [15, 0, 1, 2, 3, 4, 5, 6, 13, 14, 7, 8, 9, 10, 11, 12, 16, 17];
  // ta partie de décodage
  var data = sData.split('$');
  var cell, ligne;
  var tableau = document.getElementById("tableau");
  for (var i = 0; i < data.length; i++) {
    var x_data = data[i].split(',');
    for (var j = 0; j < x_data.length; j++) {}
    if (x_data[x_data.length - 1] == ']') {
      x_data.splice(x_data.indexOf(']'), 1);
    }
    // la partie de création des cellules
    if( x_data.length){
      // test simple pour être sûr de rester dans les indices
      var ind, nb = Math.min( x_data.length, pos.length);
      // création d'une nouvelle ligne
      ligne = tableau.insertRow(-1);
      // c'est parti pour la création
      for( ind = 0; ind < nb; ind++) {
        cell = ligne.insertCell(ind);
        cell.innerHTML = x_data[pos[ind]];
      }
    }
  }
}

Citation:

affecte directement ton événement sur la TR que tu connais au moment de la création de celle ci.

Pour finir comme tu possèdes la référence à la ligne crée on en profite pour affecter l'événement sur le click de celle ci

Code:

1
2
3
ligne.onclick = function(e){
  // ici tu mets le code qui t'intéresse
};

ce code prend sa place dans la boucle lors de la création de la ligne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    // la partie de création des cellules
    if( x_data.length){
      // test simple pour être sûr de rester dans les indices
      var ind, nb = Math.min( x_data.length, pos.length);
      // création d'une nouvelle ligne
      ligne = tableau.insertRow(-1);
      // c'est parti pour la création
      for( ind = 0; ind < nb; ind++) {
        cell = ligne.insertCell(ind);
        cell.innerHTML = x_data[pos[ind]];
      }
      // affectation de l'événement sur le click
      ligne.onclick = function(e){
        // ici tu mets le code qui t'intéresse
      };
    }

06/12/2013, 16h45
bza88

Reponse

salut a vous. je tiens d'abord a m'excuser de n'avoir pas répondu. ensuite je tiens aussi a te dire que je débute dans l'ajax et le jquery. sa fait juste que quelques jours que j'ai appris c'est deux langages donc veuillez m'excuser si mon code est touffu . je compte sur vous pour m’améliorer avec le temps. portez vous bien :ccool: