Сгенерировать сторону клиента HTML

Question

(Веб -приложение ASP.NET) Я хотел бы создать страницу, которая позволяет пользователю создавать таблицу HTML. Пользователю будут предоставлены следующие элементы управления: текстовый поток, используемый для определения количества строк в таблице, текстовой поток, используемый для определения количества столбцов в таблице, и перечисленный список форм (Ex. Square, Octagon и т. Д. ), который будет отображаться в каждой ячейке.

Поскольку пользователь вводит значение в каждом элементе управления, я хотел бы создать и отображать таблицу на основе существующих значений. Я хотел бы обработать генерацию кода таблицы HTML на стороне клиента.

Какие у меня варианты? Я наткнулся количество из статьи Я считаю, что я считаю полезным, но я не могу собрать все вместе и собрать применимый подход; У меня мало опыта со сценариями на стороне клиента, однако я не буду избегать кривой обучения (какой бы программист?), Если это приведет к чистому, эффективному решению.

Любые информативные ссылки, которые вы можете предоставить, будут высоко оценены.

Answer 1

JQuery с парой вложенных петель должен сделать это довольно легко. Вы можете оптимизировать его с помощью строителя струн или чего -то еще, но основы довольно ясны. Если вы делаете что -то более сложное, вам, вероятно, будет лучше изучить один из шаблонных двигателей для JQUERY или 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

Я выглядит так, как будто вы хотите сделать что -то действительно конкретное, поэтому вам придется сделать пользовательскую сборку. Я бы сказал, посмотрите на jQuery (http://jquery.com/), это один из лучших способов написать пользовательский JavaScript без необходимости тратить часы, чтобы переосмыслить колесо. В Google много хороших учебных пособий.

РЕДАКТИРОВАТЬ: Есть простой способ добавления элементов (таблицы строк для вашего случая) и установить их свойства. Также вы можете использовать вызовы AJAX, чтобы сохранить все это, если это необходимо.

надеюсь, это поможет

Answer 3

Вы можете программировать против HTML DOM, чтобы создать таблицу, если вы действительно хотите сделать это на стороне клиента. Создание объекта таблицы и добавление строк и столбцов не должно быть такой большой сделкой. Вы бы использовали значения текстовых поксов в качестве управляющих переменных в ваших петлях. Видеть Учебник W3SCHools Для объектов DOM для использования. Добавление клиентской стороны форм должно быть таким же простым, как добавление объектов изображения (или тегов IMG) в элементы TD.

Я не сделал это сам, но, основываясь на том, что вы описываете, это звучит как то, что можно сделать в JavaScript на стороне клиента без огромных усилий. Тем не менее, я бы определенно подумал о том, чтобы сделать это на сервере, если вам это действительно не понадобится на клиенте.

Редактировать:Кстати, я мало что знаю о jQuery. Там может быть более простой способ сделать это с этой библиотекой. Но чистый путь JS не должен быть слишком волосатым.