Generieren Sie die HTML -Tabellen -Client -Seite

Question

(ASP.NET -Webanwendung) Ich möchte eine Seite erstellen, mit der der Benutzer eine HTML -Tabelle erstellen kann. Dem Benutzer wird die folgenden Steuerelemente zur Verfügung gestellt: eine Textbox, mit der die Zeilen der Zeilen in der Tabelle definiert werden, ein Textfeld, mit dem die Anzahl der Spalten in der Tabelle definiert wird, und eine Kugelliste von Formen (z. B. Quadrat, Oktagon usw. ) die in jeder Zelle angezeigt werden.

Wenn der Benutzer innerhalb jeder Steuerung einen Wert eingibt, möchte ich die Tabelle basierend auf den vorhandenen Werten erstellen und anzeigen. Ich würde gerne die Erzeugung des Code der HTML-Tabelle auf der Client-Seite verarbeiten.

Was sind meine Optionen? Ich bin auf ein gestoßen Nummer von Artikel Das könnte nützlich sein, aber ich kann nicht alles zusammenfügen und einen anwendbaren Ansatz sammeln. Ich habe wenig Erfahrung mit Kunden-Seite, aber ich werde mich jedoch nicht vor einer Lernkurve scheuen (welcher Programmierer würde?), Wenn dies zu einer sauberen, effizienten Lösung führt.

Alle informativen Links, die Sie bereitstellen können, werden sehr geschätzt.

Answer 1

JQuery mit ein paar verschachtelten Loops sollte dies ziemlich leicht tun. Sie können es mit einem String -Builder oder so optimieren, aber die Grundlagen sind ziemlich klar. Wenn Sie etwas Komplizierteres tun, wären Sie wahrscheinlich besser dran, in eine der Vorlagen -Motoren für JQuery oder MS Ajax zu suchen:

 <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

Ich sieht aus, als ob Sie etwas wirklich Spezifisches tun möchten, also müssen Sie einen benutzerdefinierten Build durchführen. Ich würde sagen, schauen Sie sich JQuery an (http://jquery.com/), Es ist einer der besten Möglichkeiten, benutzerdefinierte JavaScript zu schreiben, ohne stundenlang das Rad zu erfinden. Es gibt viele gute Tutorials auf Google.

Bearbeiten: Es gibt eine einfache Möglichkeit, Elemente hinzuzufügen (Tabellenzeilen für Ihren Fall) und deren Eigenschaften festlegen. Sie können auch Ajax -Anrufe verwenden, um alles zu speichern, wenn dies erforderlich ist.

Ich hoffe, das hilft

Answer 3

Sie können gegen das HTML DOM programmieren, um die Tabelle zu erstellen, wenn Sie dies wirklich auf der Client -Seite tun möchten. Das Erstellen eines Tabellenobjekts und das Hinzufügen von Zeilen und Spalten sollte nicht so groß sein. Sie würden die Werte der Textfelder als Steuervariablen für Loops verwenden. Sehen Das W3Schools -Tutorial für die DOM -Objekte zu verwenden. Das Hinzufügen der Client-Seite des Formen sollte so einfach sein wie das Hinzufügen von Bildobjekten (oder IMG-Tags) in den TD-Elementen.

Ich habe es nicht selbst gemacht, aber basierend auf dem, was Sie beschreiben, klingt es nach etwas, das ohne große Anstrengung in JavaScript auf der Client -Seite getan werden könnte. Trotzdem würde ich auf jeden Fall in Betracht ziehen, es auf dem Server zu tun, es sei denn, Sie brauchen es wirklich im Client.

Bearbeiten:Übrigens, ich weiß nicht viel über JQuery. Es kann eine einfachere Möglichkeit geben, dies mit dieser Bibliothek zu tun. Aber der reine JS -Weg sollte nicht zu haarig sein.