Générer HTML côté client Table

Question

(Application Web ASP.NET) Je voudrais créer une page qui permet à l'utilisateur de créer une table HTML. L'utilisateur sera fourni avec les commandes suivantes: une zone de texte utilisé pour définir le nombre de lignes dans le tableau, une zone de texte utilisé pour définir la quantité de colonnes dans le tableau, et une liste à puces de formes (ex Square, Octagon, etc. ) qui sera affiché dans chaque cellule.

En tant que l'utilisateur entre une valeur que je voudrais construire et afficher dans chaque commande, la table en fonction des valeurs existantes. Je voudrais gérer la génération du code de la table HTML sur le côté client.

Quelles sont mes options? Je suis venu à travers un href="http://www.codeproject.com/KB/scripting/DHTMLGrid.aspx" rel="nofollow noreferrer"> de noreferrer articles que je pense qu'elle pourrait être utile, mais je suis incapable de reconstituer tout ensemble et rassembler une approche applicable; J'ai peu d'expérience avec les scripts côté client, mais je ne hésiterai pas d'une courbe d'apprentissage (ce programmeur?) Si elle se traduira par une solution propre et efficace.

Les liens d'information que vous pouvez fournir serait grandement apprécié.

Answer 1

JQuery avec un couple de boucles imbriquées devrait le faire assez facilement. Vous pouvez optimiser avec un constructeur de chaîne ou quelque chose, mais les bases sont assez claires. Si vous faites quelque chose de plus compliqué, vous seriez probablement mieux regarder dans l'un des moteurs de matriçage pour JQuery ou MS AJAX:

 <script type="text/javascript">
     $(function() {
       $('INPUT, SELECT').change(function() {
          var rows = parseInt($('#rows').get(0).value);
          var cols = parseInt($('#cols').get(0).value);
          if (isNaN(rows) || isNaN(cols)) {
              return;
          }
          var shape = $('#shape').get(0).value;
          drawTable(rows, cols, shape);
       });
     });

     function drawTable(rows, cols, shape) {
        $('#results').empty().append("<table></table>");
        var table = $('#results > TABLE');

        for (var row = 0; row < rows; row++) {
           var htmlRow;
           htmlRow = '<tr>';
           for (var col = 0; col < cols; col++) {
              htmlRow += '<td><img src="' + shape + '.gif" alt="' + shape + '" /></td>';
           }
           htmlRow += "</tr>";
           table.append(htmlRow);
        }
     }         
 </script>

 Columns: <input id="cols" type="text" /> <br />
 Rows: <input id="rows" type="text" /> <br />
 Shape: 
     <select id="shape">
        <option value="square">Square</option>
        <option value="circle">Circle</option>
     </select>

 <div id="results">
 </div>

Answer 2

Je semble que vous voulez faire quelque chose de vraiment spécifique, vous devrez donc faire une version personnalisée. Je dirais que regarder dans JQuery ( http://jquery.com/ ), il est l'un des meilleur moyen de écrire javascript personnalisé sans avoir à passer des heures à réinventer la roue. Il y a beaucoup de bons tutoriels sur Google.

edit: Il y a moyen simple d'ajouter des éléments (tables lignes pour votre cas) et définir leurs propriétés. vous pouvez également utiliser des appels AJAX pour sauver tout ce que si cela est nécessaire.

L'espoir qui aide

Answer 3

Vous pouvez programmer contre le DOM HTML pour créer la table si vous voulez vraiment faire sur le côté client. Création d'un objet de table et en ajoutant des lignes et des colonnes ne devrait pas être un gros problème. Vous utilisez les valeurs des zones de texte comme variables de contrôle dans votre pour les boucles. Voir tutoriel W3Schools pour les objets DOM à utiliser. Ajout du côté client de formes doit être aussi simple que l'ajout d'objets d'image (ou balises img) à l'intérieur des éléments td.

Je ne l'ai pas fait moi-même, mais en fonction de ce que vous décrivez cela ressemble à quelque chose qui pourrait être fait en JavaScript côté client sans une énorme quantité d'efforts. Cela dit, je voudrais certainement envisager de le faire sur le serveur, sauf si vous avez vraiment besoin sur le client.

Edit: BTW, je ne sais pas grand-chose à propos de jQuery. Il peut y avoir un moyen plus simple de le faire avec cette bibliothèque. Mais la façon dont pur JS ne devrait pas être trop poilu.