Comment éditer le contenu du tableau à partir d'une autre page en utilisant javascript

Je cherche à ajouter une page à mon site Web qui aura une table qui affichera les produits disponibles.

Ce que j'aimerais pouvoir faire, c'est que le contenu de la table puisse être modifié à partir d'une autre page (par exemple, une page d'administration). Est-il possible de faire quelque chose comme ça en utilisant JavaScript ou quelque chose de similaire? Dans l'affirmative, pouvez-vous me montrer dans la bonne direction.

Merci beaucoup.

Solution possible

En utilisant un appel AJAX, vous pouvez stocker la table elle même dans un fichier HTML.

Voici une page d'exemple. Si vous avez des questions, n'hésitez pas à leur demander. J'ai ajouté quelques fonctions telles que Ajouter une ligne .

DEMO EN DIRECT

Page de gestion administrative (index.html)

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery AJAX</title> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <style rel="stylesheet" type="text/css"> tr, td,th{ border-collapse: collapse; border:1px solid; } td{ height:22px; min-width:125px; } </style> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">"http://jquery.com"</script> <script type="text/javascript"> /* ---------------------------------- */ /* See the SCRIPT part of this answer */ /* ---------------------------------- */ </script> </head> <body> <h1>jQuery AJAX Table</h1> <section> <article> <div id="myTable" contenteditable></div> <nav data-type="table-tools"> <ul> <li> <a href="#" id="addRow">New row</a> </li> <li> <a href="#" id="addColumn">New column</a> </li> <li> <a href="#" id="saveTable">Save table</a> </li> </ul> </nav> </article> </section> </body> </html> 

SCÉNARIO

  /* On page load */ $(document).ready(function () { var getTable = function () { /*We empty the div */ $('#myTable').html(''); /*We load the table */ $.get('myTable.html', function (callback_data) { var table = callback_data; document.getElementById('myTable').innerHTML = table; }); }; getTable(); /* ----- */ /* New row button */ $('#addRow').click(function (event) { /* Prevents the real anchor click event (going to href link)*/ event.preventDefault(); /* We get the number of columns in a row*/ var colNumber = $($('#myTable tbody tr')[0]).children('td').length; var tr = document.createElement('tr'); var td = ""; for (var i = 0; i < colNumber; i++) { td = document.createElement('td'); td.appendChild(document.createTextNode("\n")); tr.appendChild(td); } $('#myTable tbody').append(tr); }); $('#addColumn').click(function (event) { event.preventDefault(); $.each($('#myTable table thead tr'), function () { $(this).append('<th></th>'); }) $.each($('#myTable table tbody tr'), function () { $(this).append('<td></td>'); }); }); $('#saveTable').click(function (event) { event.preventDefault(); var table = $('#myTable').html(); $.post('saveTable.php', { 'myTable': table }, function (callback_data) { console.log(callback_data); $('#myTable').slideToggle('fast'); setTimeout(function () { getTable(); $('#myTable').slideToggle(); }, 100); }); }); }); 

SaveTable.php

 <?php if(!isset($_POST['myTable'])) die('No data provided.'); $table = $_POST['myTable']; $handle = fopen('myTable.html','w'); $result = fwrite($handle,$table); if($result) fclose($handle); else die('Error writing file'); ?> 

MyTable.html

 <table> <thead> <tr> <th>Lorem ipsum dolor.</th> <th>Velit, vero, quis.</th> <th>Id, dolore, commodi!</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum.</td> <td>Voluptatibus, maiores.</td> <td>Quod, et.</td> </tr> <tr> <td>Lorem ipsum.</td> <td>Ex, assumenda!</td> <td>Qui, pariatur!</td> </tr> <tr> <td>Lorem ipsum.</td> <td>Alias, amet.</td> <td>Delectus, itaque!</td> </tr> <tr> <td>Lorem ipsum.</td> <td>Praesentium, quod.</td> <td>Dolor, praesentium?</td> </tr> <tr> <td>Lorem ipsum.</td> <td>Beatae, perferendis!</td> <td>Voluptates, earum!</td> </tr> <tr> <td>Lorem ipsum.</td> <td>Ratione, quis.</td> <td>Cupiditate, repellendus.</td> </tr> <tr> <td>Lorem ipsum.</td> <td>Porro, labore.</td> <td>Eligendi, nemo!</td> </tr> <tr> <td>Lorem ipsum.</td> <td>Soluta, suscipit.</td> <td>Dolorem, dolores.</td> </tr> </tbody> </table> 

Il y a peu de façons.

Ne nécessitant pas le serveur

Vous avez besoin d'une référence à l'autre fenêtre. Vous pouvez obtenir cela, par exemple en ouvrant la fenêtre – window.open() .

Ensuite, vous utilisez les méthodes HTML DOM, par exemple document.getElementById(...) , puis l'API de l'élément spécifique:

https://developer.mozilla.org/fr/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

http://www.w3schools.com/jsref/dom_obj_table.asp

Impliquer côté serveur

Cela signifie qu'une page enverrait des données au serveur et l'autre les lirait.

Vous pouvez utiliser le concept AJAX pour cela – voir la réponse avec XMLHttpRequest .

L'autre page devrait vérifier périodiquement, ou la première page devrait lui donner un signal – appelez une méthode JavaScript que vous avez écrite ou rechargez la fenêtre. Une autre option serait d'utiliser le concept Push , mais c'est actuellement une technique avancée.

Vous pouvez utiliser XMLHttpRequest pour cela, mais je vous recommande d'utiliser jQuery qui serait alors la fonction $.ajax() . Ce que cela fait, c'est envoyer des données au serveur sans rafraîchir la page ou sans que personne le sache vraiment.

Donc, ce que vous pouvez faire, c'est sur le côté administratif, envoyer des données de modification au serveur et côté client, sauf si vous utilisez un Web Socket vous devriez contacter le serveur toutes les secondes pour voir s'il y a des changements. Alors le serveur vous enverrait tout changement qui aurait été fait par l'administrateur, alors vous travaillerez avec ce résultat avec javascript pour afficher les modifications sur la page Web.

Qu'est-ce que Ajax?

Jquery ajax

Voici l'exemple demandé en utilisant jQuery

Dans votre php, vous auriez quelque chose comme ça

 if($_POST['type'] === 'updateProduct') { // update database with new price // You could have a field in the database that now say's // that the product has been updated // send the response echo 'done'; } // And the admin ajax something like this $.ajax({ type: 'POST', url: 'linkToYourFile.php', // The php file that will process the request data: { type: 'updateProduct', // This is all the data you wan't to send to your php file productID: 8484737, newPrice: '$100.99' }, success: function( result ) { // if we get a response if(result === 'done') { // The product has been updated from the admin side } } }); // on the client side if($_POST['type'] === 'checkForUpdates') { // Contact the database and check that $_POST['productID'] // has been updated // use php's json_encode function to echo the result } var checkForUpdates = function() { $.ajax({ type: 'POST', url: 'LinkToYourFile.php', dataType: 'JSON', data: { type: 'checkForUpdates', productId: 8484737 }, sucess: function ( result ) { if( result.updated === true ) { someElementPrice.textContent = result.newPrice; } } }); }; window.setInterval(checkForUpdates, 3000); // Send's the update request every 3 seconds 

Remarque: il n'est pas facile de faire ce genre de choses si vous ne le connaissez pas. Mais vous apprendrez. C'est la partie amusante. Et il y a beaucoup plus dans les coulisses, mais c'est l'idée de cela

Ceci est possible avec certaines limitations:

Vous devez modifier la table qui affiche les produits, pour récupérer les valeurs affichées à l'aide d'ajax. Ensuite, vous avez 2 possibilités: (je suis plutôt sûr qu'il y en a plus, mais je pense seulement à ces 2 en ce moment)

  • Créez une minuterie qui récupérera les valeurs pour un produit toutes les X secondes
  • Créez un auditeur qui sera appelé lors de la mise à jour d'une valeur dans le db

De cette façon, vous pouvez modifier les valeurs dans un backend et la mise à jour sera automatiquement mise à jour dans votre vision de l'avant. Vous pouvez jeter un oeil sur le cadre météorologique où ils utilisent ' Live HTML ' excessif.