Gerar Tabela HTML do Lado do Cliente

Question

(ASP.NET Aplicação Web) eu gostaria de criar uma página que permite ao usuário construir uma tabela HTML.O usuário será fornecido com os seguintes controles:uma caixa de texto usado para definir a quantidade de linhas na tabela, uma caixa de texto usado para definir a quantidade de colunas da tabela, e uma lista com marcadores de formas (ex.Praça, Octógono, etc.), que será apresentado dentro de cada célula.

Como o usuário insere um valor dentro de cada controle, eu gostaria de construir e apresentar a tabela baseada em valores existentes.Eu gostaria de lidar com a geração do HTML da tabela de código do lado do cliente.

Quais são minhas opções?Eu vim através de um número de artigos que eu acredito que poderia ser útil, mas eu sou incapaz de montar tudo e reunir um aplicáveis abordagem;Eu tenho pouca experiência com scripts do lado do cliente, no entanto eu não vou fugir de uma curva de aprendizagem (o que o programador?) se isso vai resultar em um ambiente limpo, eficiente solução.

Qualquer informativo links que você pode fornecer seria muito apreciada.

Answer 1

JQuery com alguns loops aninhados deve fazer isso com bastante facilidade. Você pode otimizá -lo com um construtor de cordas ou algo assim, mas o básico é bastante claro. Se você está fazendo algo mais complicado, provavelmente seria melhor examinar um dos motores de modelos para JQuery ou 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

Parece que você quer fazer algo realmente específico, então você terá que fazer uma construção personalizada. Eu diria olhar no jQuery (http://jquery.com/), é uma das melhores maneira de escrever JavaScript personalizado sem ter que passar horas reinventando a roda. Existem muitos bons tutoriais no Google.

EDIT: Há uma maneira simples de adicionar elementos (tabelas de linhas para o seu caso) e definir suas propriedades. Além disso, você pode usar chamadas AJAX para salvar tudo isso, se isso for necessário.

espero que ajude

Answer 3

Você pode programar o HTML DOM para criar a tabela, se você realmente deseja fazê-lo no lado do cliente.Criar um objecto de tabela e adicionar linhas e colunas não deve ser de um grande negócio.Você usaria os valores das caixas de texto como variáveis de controle em seus ciclos.Ver o W3Schools tutorial para os objetos DOM de usar.Adicionando as formas do lado do cliente deve ser tão simples como a adição de objetos de imagem (ou tags img) dentro de td elementos.

Eu não fiz isso, mas com base no que você está descrevendo parece algo que poderia ser feito em JavaScript no lado do cliente sem uma quantidade enorme de esforço.O que disse, eu com certeza gostaria de considerar fazê-lo no servidor, a menos que você realmente precisa no cliente.

Editar: BTW, eu não sei muito sobre jQuery.Pode haver uma maneira mais simples de fazê-lo com a biblioteca.Mas o JS puro forma não deve ser muito peludo.