Modification d'un tableau html

**lekonquerant** · 09/07/2009, 17h37

bonjour,
j'ai cree une page html qui contient un tableau de planning, je souhaiterai a present que lorsqu'on clique sur une des cellules de ce tableau on puisse modifier celle ci.
Quelqu'un aurait il une idée sur la maniere de proceder??
merci d'avance

**franculo_caoulene** · 09/07/2009, 17h51

Salut,

Si tu utilises HTML5 l'attribut contenteditable est implémenté dans les principaux navigateurs. Par contre, après ce n'est que du javascript, de la manipulation du DOM, le tout couplé au concept AJAX.

Il faudrait donc poster dans un autre forum. Un début de réponse

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>contenu éditable</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  h1 {font-size:1.5em;}
  p {margin:0 0 5px 0;padding:5px;background:#333;}
  </style>
</head>
<body>
  <p id="p" contenteditable="true">blah</p>
  <script type="text/javascript">
  <!--
  /*** pas important ***/
  var FC = {
    Evenement: {
      evenements: [],
      ajouter: function(elm, evt, fn) {
        var fni = function(e) {                             // prévient le comportement par défaut
          if (fn(e)===false) {                              // false explicitement car peut être undefined en cas de délégation d'évènement
            if (e.preventDefault) { e.preventDefault(); }
            else { e.returnValue = false; }
          }
        };
        if (document.addEventListener) { elm.addEventListener(evt, fni, false); }
        else if (document.attachEvent) { elm.attachEvent("on" + evt, fni); }
        FC.Evenement.evenements.push([elm, evt, fni]);
      },
      supprimer: function(elm, evt, fn) {
        var evts = FC.Evenement.evenements;
        for (var i=evts.length-1; i>=0; i--) {
          if (evts[i][0]===elm && evts[i][1]===evt) {
            if (document.removeEventListener) { elm.removeEventListener(evts[i][1], evts[i][2], false); } 
            else if (document.detachEvent) { elm.detachEvent("on" + evts[i][1], evts[i][2]); }
            FC.Evenement.evenements.splice(i,1);
          }
        }
      }
    }
  }
  /*** pas important ***/
  
  FC.Evenement.ajouter(document.getElementById("p"), "blur", function(e) {
    var elm = e.target || event.srcElement;
    alert(elm.textContent);
  });
  //-->
  </script>
</body>
</html>

Modification d'un tableau html

HTML

Discussions similaires

Partager

Partager