[HTML 5] Modification d'un tableau html

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:

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>