Создать HTML-таблицу на стороне клиента

Question

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

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

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

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

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

Answer 3

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

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

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