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

**sarra63** · 27/11/2016, 09h06

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.

**sabotage** · 27/11/2016, 15h16

Comment les cellules sont-elles rendues éditables ?

**sarra63** · 27/11/2016, 15h45

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 :

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
 
 
<!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>

**sarra63** · 27/11/2016, 15h53

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

**tormoh** · 27/11/2016, 18h03

Il faut utilser les formulaire <form action="" method="post" > a l'interieur des input ou select ou ...
<button type="submit" ... >
</form>

**sarra63** · 28/11/2016, 08h46

oui c'est ce que j'ai fait mais il ne me récupère pas les données du tableau

Invité · 28/11/2016, 09h51

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

**sarra63** · 28/11/2016, 10h21

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

Invité · 28/11/2016, 10h28

Nous ne sommes ni magiciens, ni devins.

Si tu ne montres pas ton code,...

**sarra63** · 28/11/2016, 10h44

Code php :

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
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

**Celira** · 28/11/2016, 13h34

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.

**sarra63** · 28/11/2016, 15h47

je viens de l'essai dump ..........
il m'affiche tout les input avec leurs valeurs sauf le tableau

**Celira** · 28/11/2016, 16h40

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)

**tormoh** · 29/11/2016, 15h13

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

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

JavaScript

Discussions similaires

Partager

Partager