Bonjour,

Je souhaiterais afficher un message lorsque je clique sur la ligne de mon tableau.
Par exemple si je clique sur "Angelica Ramos", j'aimerais que le message "vous avez cliqué sur Angelica Ramos" s'affiche.

Voici mon code :

<table id="exampletoto" class="display" cellspacing="0" width="100%" height:"300px";>
        <thead>
            <tr>
                <th>Organization</th>
                <th>Nb docs</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td id="orga1">CEA</td>
                <td dd="d">2</td>
            </tr>
            <tr>
                <td id="orga2">CNRS</td>
                <td>8</td>
            </tr>
            <tr>
                <td id="orga3">ABIS</td>
                <td>8</td>
            </tr>
            <tr>
                <td id="orga4">Adobe</td>
                <td>99</td>
            </tr>
            <tr>
                <td id="orga5">Alcoa</td>
                <td>89</td>
            </tr>
            <tr>
                <td id="orga6">Boeing</td>
                <td>4</td>
            </tr>
            <tr>
                <td id="orga7">Google</td>
                <td>3</td>
             </tr>
            <tr>
                <td id="orga8">IBM</td>
                <td>68</td>
            </tr>
            <tr>
                <td id="orga9">Questar</td>
                <td>2</td>
            </tr>
            <tr>
                <td id="orga10">Enron</td>
                <td>758</td>
            </tr>
            <tr>
                <td id="orga11">Sony</td>
                <td>3</td>
             </tr>
            <tr>
                <td id="orga12">Quinn</td>
                <td>65</td>
            </tr>
            <tr>
                <td id="orga13">Charde</td>
                <td>856</td>
            </tr>
            <tr>
                <td id="orga14">Kennedy</td>
                <td>8</td>
             </tr>
            <tr>
                <td id="orga15">Fitzpatrick</td>
                <td>86</td>
            </tr>
            <tr>
                <td id="orga16">Silva</td>
                <td>3</td>
            </tr>
            <tr>
                <td id="orga17">Byrd</td>
                <td>99</td>
            </tr>
            <tr>
                <td id="orga18">Little</td>
                <td>79</td>
            </tr>
            <tr>
                <td id="orga19">Greer</td>
                <td>5</td>
            </tr>
            <tr>
                <td id="orga20">Dai</td>
                <td>1</td>
            </tr>
            <tr>
                <td id="orga21">Caldwell</td>
                <td>658</td>
             </tr>
            <tr>
                <td id="orga22">Yuri</td>
                <td>68</td>
            </tr>
            <tr>
                <td id="orga23">Vance</td>
                <td>55</td>
            </tr>
            <tr>
                <td id="orga24">Doris</td>
                <td>5</td>
            </tr>
            <tr>
                <td id="orga25">Ramos</td>
                <td>44</td>
            </tr>
            <tr>
                <td id="orga26">Gavin</td>
                <td>77</td>
            </tr>
            <tr>
                <td id="orga27">Chang</td>
                <td>7</td>
            </tr>
            <tr>
                <td id="orga28">Brenden</td>
                <td>2</td>
            </tr>
            <tr>
                <td id="orga29">Green</td>
                <td>564</td>
            </tr>
            <tr>
                <td id="orga30">Itou</td>
                <td>32</td>
            </tr>
            <tr>
                <td id="orga31">House</td>
                <td>5</td>
            </tr>
            <tr>
                <td id="orga32">Suki</td>
                <td>168</td>
            </tr>
            <tr>
                <td id="orga33">Prescott</td>
                <td>77</td>
            </tr>
            <tr>
                <td id="orga34">Cortez</td>
                <td>54</td>
            </tr>
            <tr>
                <td id="orga35">Mccray</td>
                <td>8</td>
            </tr>
            <tr>
                <td id="orga36">Unity</td>
                <td>89</td>
            </tr>
            <tr>
                <td id="orga37">Hatfield</td>
                <td>96</td>
            </tr>
            <tr>
                <td id="orga38">Hope</td>
                <td>75</td>
            </tr>
            <tr>
                <td id="orga39">Harrell</td>
                <td>56</td>
            </tr>
            <tr>
                <td id="orga40">Mooney</td>
                <td>25</td>
            </tr>
            <tr>
                <td id="orga41">Jackson</td>
                <td>89</td>
            </tr>
            <tr>
                <td id="orga42">Liang</td>
                <td>6</td>
            </tr>
            <tr>
                <td id="orga43">Nash</td>
                <td>2</td>
            </tr>
            <tr>
                <td id="orga44">Sakura</td>
                <td>8</td>
            </tr>
            <tr>
                <td id="orga45">Thor</td>
                <td>3</td>
            </tr>
            <tr>
                <td id="orga46">Finn</td>
                <td>478</td>
            </tr>
            <tr>
                <td id="orga47">Baldwin</td>
                <td>857</td>
            </tr>
            <tr>
                <td id="orga48">Zenaida</td>
                <td>1</td>
            </tr>
            <tr>
                <td id="orga49">Serrano</td>
                <td>65</td>
            </tr>
            <tr>
                <td id="orga50">Jcosta</td>
                <td>2</td>
            </tr>
            <tr>
                <td id="orga51">Stevens</td>
                <td>23</td>
            </tr>
            <tr>
                <td id="orga52">Butler</td>
                <td>53</td>
            </tr>
            <tr>
                <td id="orga53">Lael</td>
                <td>41</td>
            </tr>
            <tr>
                <td id="orga54">Alexander</td>
                <td>75</td>
            </tr>
            <tr>
                <td id="orga55">Shad</td>
                <td>45</td>
            </tr>
            <tr>
                <td id="orga56">Bruce</td>
                <td>5</td>
            </tr>
            <tr>
                <td id="orga57">Snider</td>
                <td>98</td>
            </tr>


        </tbody>
        <!--<tfoot>
            <tr>
                <td>Name</td>
                <td>Organization</td>
                <td>Number documents</td>
            </tr>
        </tfoot>-->
    </table>


Pouvez vous m'aider svp ?
JENCAL, la réponse me convient parfaitement ! merci !

Savez vous comment faire la même chose pour un treemap ? C'est à dire que lorsqu'on clique sur un carré, ca affiche un message.

Exemple de code :

var labelType, useGradients, nativeTextSupport, animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
  elem: false,
  write: function(text){
    if (!this.elem) 
      this.elem = document.getElementById('log');
    this.elem.innerHTML = text;
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
  }
};


function init(){
   var json = {
    "children": [
     {
 
       "data": {
         "playcount": 800, 
         "$area": 800,
         "$color": "#3d3f0d",
       }, 
       "id": "artist_A Perfect Circle", 
       "name": "Petrol-aaaa",
     }, 
     {

       "data": {
         "playcount": 750, 
         "$area": 750,
         "$color": "#515412",
       }, 
       "id": "artist_Mad Season", 
       "name": "Oil-fegfzegfze"
     }, 
     {

       "data": {
         "playcount": 700, 
         "$area": 700,
         "$color": "#656916"
       }, 
       "id": "artist_Stone Temple Pilots", 
       "name": "Gas-rgzegqegerh"
     }, 
     {
 
       "data": {
         "playcount": 650, 
         "$area": 650,
         "$color": "#797e1b"
       }, 
       "id": "artist_Bush", 
       "name": "Car-oil"
     }, 
     {
 
       "data": {
         "playcount": 600, 
         "$area": 600,
         "$color": "#8d931f"
       }, 
       "id": "artist_Foo Fighters", 
       "name": "Road-ezgzgszgvs"
     }, 
     {

       "data": {
         "playcount": 550, 
         "$area": 550,
         "$color": "#a2a824"
       }, 
       "id": "artist_Luis Alberto Spinetta", 
       "name": "Bike-greehrhe"
     }, 
     {

       "data": {
         "playcount": 500, 
         "$area": 500,
         "$color": "#b6bd28"
       }, 
       "id": "artist_Alice in Chains", 
       "name": "Sun-rehfdhgtfr"
     }, 
     {

       "data": {
         "playcount": 450, 
         "$area": 450,
         "$color": "#c8d02c"
       }, 
       "id": "artist_Tool", 
       "name": "Water-azfrezgrhe"
     }, 
     {

       "data": {
         "playcount": 400, 
         "$area": 400,
         "$color": "#cad22d"
       }, 
       "id": "artist_Chris Cornell", 
       "name": "Whoole-htyulylyl"
     }, 
     {
 
       "data": {
         "playcount": 350, 
         "$area": 350,
         "$color": "#cfd742"
       }, 
       "id": "artist_Disturbed", 
       "name": "Energy-eqnybhtyb "
     }, 
     {

       "data": {
         "playcount": 300, 
         "$area": 300,
         "$color": "#d5db57"
       }, 
       "id": "artist_Erykah Badu", 
       "name": "Technology-trztynhrn"
     }, 
     {

       "data": {
         "playcount": 250, 
         "$area": 250,
         "$color": "#dae06c"
       }, 
       "id": "artist_Audioslave", 
       "name": "New-reyryeyy"
     }, 
     {
 
       "data": {
         "playcount": 200, 
         "$area": 200,
         "$color": "#dfe481"
       }, 
       "id": "artist_Soda Stereo", 
       "name": "Money-thrd"
     }, 
     {

       "data": {
         "playcount": 150, 
         "$area": 150,
         "$color": "#e5e996"
       }, 
       "id": "artist_Sinch", 
       "name": "Oleoduc-retrttret"
     }, 
     {

       "data": {
         "playcount": 130, 
         "$area": 130,
         "$color": "#eaedab"
       }, 
       "id": "artist_Pearl Jam", 
       "name": "International"
     }, 
     {

       "data": {
         "playcount": 110, 
         "$area": 110,
         "$color": "#eff2c0"
       }, 
       "id": "artist_Kom", 
       "name": "Country"
     }, 
     {

       "data": {
         "playcount": 100, 
         "$area": 100,
         "$color": "#f4f6d5"
       }, 
       "id": "artist_Temple of the Dog", 
       "name": "Future-rhjtrgfrj"
     }, 
     {
 
       "data": {
         "playcount": 75, 
         "$area": 75,
         "$color": "#fafbea"
       }, 
       "id": "artist_Nine Inch Nails", 
       "name": "Panel-zrveztvevz"
     }, 
     {
 
       "data": {
         "playcount": 50, 
         "$area": 50,
         "$color": "#fbfbea"
       }, 
       "id": "artist_Tryo", 
       "name": "Environment-htrhrhthrh"
     }, 
     {

       "data": {
         "playcount": 25, 
         "$area": 25,
         "$color": "#fbf7ea"
       }, 
       "id": "artist_Sublime", 
       "name": "Weather-hrthrhthr"
     }, 
     
   ], 
   "data": {
    "$color":"#FFFFFF"}, 
   "id": "root", 
   "name": "",
   };

  var tm = new $jit.TM.Squarified({
    //where to inject the visualization
    injectInto: 'infovis',
    //parent box title heights
    titleHeight: 15,
    //enable animations
    animate: animate,
    //box offsets
    offset: 1,
    //Attach left and right click events
    Events: {
      enable: true,
      onClick: function(node) {
        if(node) tm.enter(node);
      },
      onRightClick: function() {
        tm.out();
      }
    },
    duration: 1000,
    //Enable tips
    Tips: {
      enable: true,
      //add positioning offsets
      offsetX: 20,
      offsetY: 20,
      //implement the onShow method to
      //add content to the tooltip when a node
      //is hovered
      onShow: function(tip, node, isLeaf, domElement) {
        var html = "<div class=\"tip-title\">" + node.name 
          + "</div><div class=\"tip-text\">";
        var data = node.data;
        if(data.playcount) {
          html += data.playcount;
        }
        if(data.image) {
          html += "<img src=\""+ data.image +"\" class=\"album\" />";
        }
        tip.innerHTML =  html; 
      }  
    },
    //Add the name of the node in the correponding label
    //This method is called once, on label creation.
    onCreateLabel: function(domElement, node){
        domElement.innerHTML = node.name;
        var style = domElement.style;
        style.display = '';
        style.border = '1px solid transparent';
        domElement.onmouseover = function() {
          style.border = '1px solid #9FD4FF';
        };
        domElement.onmouseout = function() {
          style.border = '1px solid transparent';
        };
    }
  });
  tm.loadJSON(json);
  tm.refresh();
  //end
  //add events to radio buttons
  var sq = $jit.id('r-sq'),
      st = $jit.id('r-st'),
      sd = $jit.id('r-sd');
  var util = $jit.util;
  util.addEvent(sq, 'change', function() {
    if(!sq.checked) return;
    util.extend(tm, new $jit.Layouts.TM.Squarified);
    tm.refresh();
  });
  util.addEvent(st, 'change', function() {
    if(!st.checked) return;
    util.extend(tm, new $jit.Layouts.TM.Strip);
    tm.layout.orientation = "v";
    tm.refresh();
  });
  util.addEvent(sd, 'change', function() {
    if(!sd.checked) return;
    util.extend(tm, new $jit.Layouts.TM.SliceAndDice);
    tm.layout.orientation = "v";
    tm.refresh();
  });
  //add event to the back button
  var back = $jit.id('back');
  $jit.util.addEvent(back, 'click', function() {
    tm.out();
  });
}



Avez vous une idée ?
Modifié par Lucil (16 Aug 2016 - 16:58)