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>

Answer 2

I looks like you want to do something really specific, so you will have to do a custom build. I'd say look into JQuery (http://jquery.com/), it's one of the best way to write custom javascript without having to spend hours re-inventing the wheel. There are a lot of good tutorials on Google.

edit: There are simple way to add elements (tables rows for your case) and set their properties. Also you can use AJAX calls to save all that if this is needed.

Hope that helps

Answer 3

You can program against the HTML DOM to build the table if you really want to do it on the client side. Creating a table object and adding rows and columns shouldn't be that big of a deal. You would use the values of the text boxes as control variables in your for loops. See the W3Schools tutorial for the DOM objects to use. Adding the shapes client-side should be as simple as adding image objects (or img tags) inside the td elements.

I haven't done it myself, but based on what you're describing it sounds like something that could be done in JavaScript on the client side without a huge amount of effort. That said, I would definitely consider doing it on the server unless you really need it on the client.

Edit: BTW, I don't know much about jQuery. There may be a simpler way to do it with that library. But the pure JS way shouldn't be too hairy.