Genera tabella HTML lato client

Question

(Applicazione Web ASP.NET) Vorrei creare una pagina che consenta all'utente di creare una tabella HTML.All’utente verranno forniti i seguenti controlli:una casella di testo utilizzata per definire la quantità di righe nella tabella, una casella di testo utilizzata per definire la quantità di colonne nella tabella e un elenco puntato di forme (es.Quadrato, Ottagono, ecc.) che verranno visualizzati all'interno di ciascuna cella.

Quando l'utente inserisce un valore all'interno di ciascun controllo, vorrei creare e visualizzare la tabella in base ai valori esistenti.Mi piacerebbe gestire la generazione del codice della tabella HTML sul lato client.

Quali sono le mie opzioni?Mi sono imbattuto in un numero Di articoli che credo possa essere utile, ma non riesco a mettere insieme il tutto e a trovare un approccio applicabile;Ho poca esperienza con lo scripting lato client, tuttavia non eviterò una curva di apprendimento (quale programmatore lo farebbe?) se si tradurrà in una soluzione pulita ed efficiente.

Qualsiasi collegamento informativo che puoi fornire sarebbe molto apprezzato.

Answer 1

JQuery con un paio di cicli nidificati dovrebbe fare piuttosto facilmente. È possibile ottimizzare con un costruttore stringa o qualcosa del genere, ma le basi sono abbastanza chiare. Se stai facendo qualcosa di più complicato, si sarebbe probabilmente meglio a guardare in uno dei motori di template per JQuery o 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

Sembra che tu voglia fare qualcosa di veramente specifico, quindi dovrai creare una build personalizzata.Direi di esaminare JQuery (http://jquery.com/), è uno dei modi migliori per scrivere JavaScript personalizzato senza dover passare ore a reinventare la ruota.Ci sono molti buoni tutorial su Google.

modificare:Esistono modi semplici per aggiungere elementi (righe di tabelle per il tuo caso) e impostarne le proprietà.Inoltre puoi utilizzare le chiamate AJAX per salvare tutto ciò se necessario.

Spero possa aiutare

Answer 3

È possibile programmare contro il DOM HTML per creare la tabella se si vuole veramente farlo sul lato client. La creazione di un oggetto tabella e l'aggiunta di righe e colonne non dovrebbe essere così grande di un affare. Si potrebbe utilizzare i valori delle caselle di testo come variabili di controllo nella vostra cicli for. Vedere il tutorial W3Schools per il DOM oggetti da utilizzare. Aggiunta del forme lato client dovrebbe essere sufficiente aggiungere oggetti immagine (o tag img) all'interno degli elementi td.

Non l'ho fatto io stesso, ma sulla base di quello che stai descrivendo suona come qualcosa che potrebbe essere fatto in JavaScript sul lato client senza un enorme quantità di sforzo. Detto questo, avrei sicuramente in considerazione facendo sul server a meno che non si ha realmente bisogno sul client.

Modifica BTW, io non ne so molto di jQuery. Ci può essere un modo più semplice per farlo con quella libreria. Ma il modo in cui JS pura non dovrebbe essere troppo peloso.