Generar HTML Tabla lado del cliente

Question

(aplicación Web ASP.NET) Me gustaría crear una página que permite al usuario crear una tabla HTML. Al usuario se le proporciona con los siguientes controles: un cuadro de texto utilizado para definir la cantidad de filas de la tabla, un cuadro de texto utilizado para definir la cantidad de columnas en la tabla, y una lista con viñetas de formas (ex Square, octágono, etc. ), que se muestra dentro de cada célula.

A medida que el usuario introduce un valor dentro de cada control, me gustaría construir y mostrar la tabla en base a los valores existentes. Me gustaría manejar la generación del código de la tabla HTML en el lado del cliente.

¿Cuáles son mis opciones? Me he encontrado con un número de noreferrer artículos creo que podría ser útil, pero no soy capaz para reconstruir todo juntos y reunir un enfoque aplicable; Tengo poca experiencia con secuencias de comandos del lado del cliente, sin embargo, no va a evitar que una curva de aprendizaje (lo que haría programador?) Si se va a dar lugar a una solución limpia y eficiente.

Cualquier enlaces informativos que se puede brindar serían muy apreciados.

Answer 1

jQuery con un par de bucles anidados debe hacer esto con bastante facilidad. Se puede optimizar con un constructor de cadena o algo así, pero los fundamentos son bastante claras. Si estás haciendo algo más complicado, probablemente sería mejor buscar en uno de los motores de plantillas para 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

Me parece que quiere hacer algo realmente específico, por lo que tendrá que hacer una estructura de encargo. Yo diría mirada en jQuery ( http://jquery.com/ ), que es una de la mejor manera de escribir JavaScript personalizado sin tener que pasar horas re-inventar la rueda. Hay un montón de buenos tutoriales en Google.

Edit: Hay forma sencilla de añadir elementos (tablas filas para su caso) y establecer sus propiedades. También se puede utilizar llamadas AJAX para salvar a todos que si esto es necesario.

Espero que ayude

Answer 3

Puede programar contra el DOM HTML para construir la tabla si realmente quiere hacerlo en el lado del cliente. Creación de un objeto de tabla y la adición de filas y columnas no debería ser tan grande de un acuerdo. Se podría utilizar los valores de los cuadros de texto como variables de control en su bucles. Ver la tutorial W3Schools para el DOM objetos de usar. Adición del lado del cliente formas debe ser tan simple como la adición de objetos de imagen (o etiquetas IMG) dentro de los elementos td.

No he hecho yo mismo, pero en base a lo que estás describiendo suena como algo que se podía hacer en JavaScript del lado del cliente sin una gran cantidad de esfuerzo. Dicho esto, me volvería a considerar hacerlo en el servidor a menos que realmente lo necesite en el cliente.

Editar Por cierto, no sé mucho acerca de jQuery. Puede haber una manera más sencilla de hacerlo con esa biblioteca. Pero la forma JS puro no debe ser demasiado peludo.