[Résolu] afficher du Json - aide sur l'affichage de texte Json par Az_ReHaaB - page 1

Bonjour ,

Ca fait plusieurs jours que je travail sur un tableau éditable, j'ai fait en sorte que quand j'appuie sur mon bouton exporter les données , les donner s'affiche en json dans un textarea.

Je voudrais faire en sorte que quand j'appuie sur le bouton importer, le text au format Json dans le textarea soit afficher dans mon tableau(l'inverse de l'exportation quoi ) merci d'avance de vos aide

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tableau éditable</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">
    <h1><center> Tableau éditable </center></h1>
    <div id="table" class="table-editable">
      <span class="table-add glyphicon glyphicon-plus"></span>
        <table class="table">
          <tr>
            <th contenteditable="true">nom</th>
            <th contenteditable="true">Valeur</th>
            <th></th>
            <th></th>
          </tr>
          <tr>
            <td contenteditable="true">a remplir</td>
            <td contenteditable="true">a remplir</td>
            <td>
              <span class="table-remove glyphicon glyphicon-remove"></span>
            </td>
            <td>
              <span class="table-up glyphicon glyphicon-arrow-up"></span>
              <span class="table-down glyphicon glyphicon-arrow-down"></span>
            </td>
          </tr>
          <!-- tableau cloné -->
          <tr class="hide">
              <td contenteditable="true">a remplir</td>
              <td contenteditable="true">a remplir</td>
              <td>
                <span class="table-remove glyphicon glyphicon-remove"></span>
              </td>
              <td>
                <span class="table-up glyphicon glyphicon-arrow-up"></span>
                <span class="table-down glyphicon glyphicon-arrow-down"></span>
              </td>
          </tr>
        </table>
      </div>
          <center><button id="import-btn" class="btn btn-primary">importer les données</button></center>
        <p id="import"></p>
      <center><button id="export-btn" class="btn btn-primary">exporter les données</button></center>
      <center><textarea id="export" rows="4" cols="50"> </textarea></center>
    </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 src="js/index.js"></script>
  </body>
</html>

var $TABLE = $('#table');
var $BTN = $('#import-btn');
var $IMPORT = $('#import');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');


$('.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();
});

$('.table-up').click(function () {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return; 
  $row.prev().before($row.get(0));
});

$('.table-down').click(function () {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];

  $($rows.shift()).find('th:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });

  $rows.each(function () {
    var $td = $(this).find('td');
    var h = {};

    headers.forEach(function (header, i) {
      h[header] = $td.eq(i).text();   
    });
    
    data.push(h);
  });

  $EXPORT.text(JSON.stringify(data));

  $IMPORT.data(JSON.parse(text));

});

.table-editable {
  position: relative;
}
.table-editable .glyphicon {
  font-size: 20px;
}

.table-remove {
  color: #700;
  cursor: pointer;
}
.table-remove:hover {
  color: #f00;
}

.table-up, .table-down {
  color: #007;
  cursor: pointer;
}
.table-up:hover, .table-down:hover {
  color: #00f;
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 50px;
  right: 0;
}
.table-add:hover {
  color: #0b0;
}

j'ai mit le CSS au cas ou

Az_ReHaaB

20 janvier 2017 à 10:50:53

Anonyme

21 janvier 2017 à 13:35:14

Déjà, avec :

var $BTN = $('#import-btn')
var $BTN = $('#export-btn');

... tu ne vas pas aller loin.

Pour l'importation, il te faut un code du genre ( je ne connait rien à jQuery, donc je donne du pseudo code ) :

Au click sur le BUTTON :
  Récupérer les données depuis le TEXTAREA ~ Object JSON.parse(String);
  Réinitialiser le TABLE

  Pour chaque machin dans les données Json : # À voir en fonction de ce à quoi ressemblent tes données
    Ajouter un TR au TABLE avec les TD qui vont bien avec les données

Bisous.

AbcAbc6

21 janvier 2017 à 21:38:55

bonsoir, sujet déplacer dans le forum JavaScript.

Au passage la balise <center> est obsolète en html5.

24 janvier 2017 à 11:33:50

merci pour ton aide novax j'i enfin réussi bonne journée a toi.

Bisous

afficher du Json

aide sur l'affichage de texte Json

afficher du Json

Supprimer

Modérer

Signaler le message aux modérateurs