Generate HTML Table Client Side

Question

(ASP.NET Web Application) I'd like to create a page which allows the user to build an HTML table. The user will be provided with the following controls: a textbox used to define the amount of rows in the table, a textbox used to define the amount of columns in the table, and a bulleted list of shapes (ex. Square, Octagon, etc) which will be displayed within each cell.

As the user enters a value within each control, I'd like to build and display the table based upon the existing values. I'd like to handle the generating of the HTML table's code on the client-side.

What are my options? I've come across a number of articles that I believe could be useful, but I'm unable to piece everything together and gather an applicable approach; I have little experience with client-side scripting, however I will not shy away from a learning curve (what programmer would?) if it will result in a clean, efficient solution.

Any informative links you can provide would be greatly appreciated.

Answer 1

JQuery with a couple of nested loops should do this fairly easily. You can optimize it with a string builder or something, but the basics are pretty clear. If you're doing something more complicated, you'd probably be better off looking into one of the templating engines for JQuery or 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>