Generieren HTML-Tabelle Clientseite

Question

(ASP.NET-Webanwendung) Ich möchte eine Seite erstellen, die es dem Benutzer ermöglicht, eine HTML-Tabelle zu erstellen. Dem Benutzer werden die folgenden Steuerelemente zur Verfügung gestellt: ein Textfeld zum Definieren der Zeilenanzahl in der Tabelle, ein Textfeld zum Definieren der Spaltenanzahl in der Tabelle und eine Liste mit Aufzählungszeichen (z. B. Quadrat, Oktagon, usw.)), die in jeder Zelle angezeigt werden.

Wenn der Benutzer einen Wert in jedes Steuerelement eingibt, möchte ich die Tabelle basierend auf den vorhandenen Werten erstellen und anzeigen. Ich möchte die Generierung des Codes der HTML-Tabelle auf der Clientseite behandeln.

Was sind meine Optionen? Ich bin auf ein numberofarticles gestoßen, von dem ich glaube, dass es nützlich sein könnte, aber ich bin nicht in der Lage, alles zusammenzufügen und einen anwendbaren Ansatz zu sammeln; Ich habe wenig Erfahrung mit Client-Side-Scripting, aber ich werde nicht vor einer Lernkurve zurückschrecken (welcher Programmierer würde?), Wenn es zu einer sauberen, effizienten Lösung führt.

Alle informativen Links, die Sie zur Verfügung stellen können, würden sehr geschätzt werden.

Answer 1

JQuery mit ein paar verschachtelten Schleifen sollte dies ziemlich leicht tun. Sie können es mit einem String-Builder oder etwas optimieren, aber die Grundlagen sind ziemlich klar. Wenn Sie etwas komplizierter tun, dann würden Sie wahrscheinlich besser dran, in einer der Templating Engines für JQuery oder MS AJAX suchen sein:

<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 sehe aus, als ob du etwas wirklich Spezifisches machen willst, also musst du einen Custom Build machen. Ich würde sagen, in JQuery (http://jquery.com/), es ist einer der besten Weg, um benutzerdefinierte Javascript zu schreiben, ohne stundenlang neu erfinden das Rad zu verbringen. Es gibt viele gute Tutorials auf Google.

edit: Es gibt eine einfache Möglichkeit, Elemente (Tabellenzeilen für Ihren Fall) hinzuzufügen und ihre Eigenschaften festzulegen. Sie können auch alle AJAX-Aufrufe verwenden, wenn dies erforderlich ist.

Hoffnung, die

Answer 3

Sie hilft gegen den HTML-DOM programmieren kann die Tabelle zu bauen, wenn Sie es wirklich auf der Client-Seite tun wollen. Das Erstellen eines Tabellenobjekts und das Hinzufügen von Zeilen und Spalten sollte kein so großes Problem sein. Sie würden die Werte der Textfelder als Steuervariablen in Ihren for-Schleifen verwenden. Informationen zu den zu verwendenden DOM-Objekten finden Sie unter the W3Schools tutorial. Das Hinzufügen der Shapes clientseitig sollte so einfach sein wie das Hinzufügen von Bildobjekten (oder img-Tags) innerhalb der td-Elemente.

Ich habe es nicht selbst gemacht, aber basierend auf dem, was Sie beschreiben, klingt es wie etwas, das in JavaScript auf der Client-Seite ohne großen Aufwand getan werden könnte. Nichtsdestotrotz würde ich definitiv darüber nachdenken, es auf dem Server zu tun, es sei denn, Sie benötigen es wirklich auf dem Client.

Bearbeiten: BTW, weiß ich nicht viel über jQuery. Es kann einen einfacheren Weg geben, es mit dieser Bibliothek zu tun. Aber die reine JS-Art sollte nicht zu haarig sein.