Récupérer les données d'un tableau html modifiable par attribut contenteditable

Version imprimable

27/11/2016, 09h06
sarra63

Récupérer les données d'un tableau html modifiable par attribut contenteditable

Bonjour,

J'ai un tableau en html avec des celules qui sont editables je veux récuperer le contenu de ces cellules et les enregistrer dans une bases de données mysql comment faire svp? sachant que je suis débutante en php et html merci.
27/11/2016, 15h16
sabotage

Comment les cellules sont-elles rendues éditables ?

voici une partie de mon code, je veux lorsque j'appuye sur le boutton j'arrive à transférer mes données dans un serveur mysql.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html > <head> </head> <body> <table id="table" name="tableau" > <tr> <td contenteditable="true"></td> <td contenteditable="true"></td> <td contenteditable="true"></td> </tr> </table> <button id="export-btn" type="submit">Export Data</button> </body> </html>

27/11/2016, 15h53
sarra63

je travaille sur un formulaire d'inscription ou l'utilisateur doit saisir toutes les notes obtenues durant son cursus, du coup j'utilise un tableau avec des celules modifiable
27/11/2016, 18h03
tormoh

Il faut utilser les formulaire <form action="" method="post" > a l'interieur des input ou select ou ...
<button type="submit" ... >
</form>
28/11/2016, 08h46
sarra63

oui c'est ce que j'ai fait mais il ne me récupère pas les données du tableau
28/11/2016, 09h51
Invité
Bonjour,

l'informatique n'est pas un "tour de magie".

Si tu débutes, commence par faire simple.
- 1/ Un formulaire "classique" <form method="post"...>,
- 2/ des "simples" champs <input name="..." /> (le name permet d'être ensuite récupéré et traité)
- 3/ Un traitement "normal" en PHP après soumission du formulaire
A lire :
- PHP : Le tutoriel pour grands débutants pressés
  (sauf la partie "base de données, car mysql_ est obsolète)
- Pour les interactions avec la base de données, utiliser PDO : Comprendre PDO
28/11/2016, 10h21
sarra63

oui j'ai utilisé des input et des label et des button maintenant je suis bloquée sur un tableau
j'explique plus: j'ai un formulaire et dans ce formulaire j'ai un tableau ce tableau dois etre editable et à la fin lorsque je clique sur un button submit je dois récupérer les données des "input" qui est fait avec succés mais ceux de ma table sans succés :(
28/11/2016, 10h28
Invité

Nous ne sommes ni magiciens, ni devins.

Si tu ne montres pas ton 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
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
98
 
<?php
if(isset ($_POST["btn"]))
{
 
$name  = trim($_POST['nom']);
$lastname  = trim($_POST['prenom']);
try{
if(($savedoss->save_dossier_ec($name,$lastname)))	{
echo "succes";
}
}
?>
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title></title>
 
 
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
  <div class="container">
 
 
 
 
<form method="post">
<input type="text" name="nom" placeholder="nom" >
<input type="text" name="prenom" placeholder="prenom" >
 
  <div id="table" class="table-editable">
    <span class="table-add glyphicon glyphicon-plus"></span>
    <table class="table">
      <tr>
        <th>Name</th>
        <th>Value</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true">Stir Fry</td>
        <td contenteditable="true">stir-fry</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
 
      </tr>
 
      <tr class="hide">
        <td contenteditable="true"> </td>
        <td contenteditable="true"> </td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
 
      </tr>
    </table>
  </div>
 
<button id="export-btn" type="submit" class="btn btn-primary" name="btn"> save </button>
</form>
 
 
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script>
 
    <script>
    var $TABLE = $('#table');
    var $BTN = $('#export-btn');
 
 
    $('.table-add').click(function () {
      var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
      $TABLE.find('table').append($clone);
    });
 
    $('.table-remove').click(function () {
      $(this).parents('tr').detach();
    });
 
 
 
 
    </script>
 
</body>
</html>

voici mon code je vx que lorsque je click sur save il me transmis les données dans une table mysql

28/11/2016, 13h34
Celira

Premier réflexe pour débugguer : un var_dump($_POST); au début du script pour voir ce que le formulaire transmet réellement.
Si le contenu du formulaire est bien transmis, vérifie ce que fait la fonction qui est censée faire l'enregistrement.
28/11/2016, 15h47
sarra63

je viens de l'essai dump ..........
il m'affiche tout les input avec leurs valeurs sauf le tableau :(
28/11/2016, 16h40
Celira

Je viens de vérifier la norme : contenteditable rend effectivement l'élément modifiable (et permet de mettre des jolies mises en forme dessus) mais a priori, il n'y a rien qui transmette automatiquement les données à la façon d'un formulaire. Il faut visiblement faire les choses soi-même à coup de JS et/ou de requêtes AJAX.

Du coup, c'est davantage un problème de JS que de PHP (vu que a priori la partie PHP de ton script fonctionne)
29/11/2016, 15h13
tormoh

si vous parler de ce tableau <table class="table"> html , il ne sera pas transmis avec POST c'est pas un champ de saisie ou selection; il affiche des donnees au niveau client 'mozilla , chrome ..' sitout