Создать HTML-таблицу на стороне клиента - PullRequest
Новая
       51

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

1 голос
/ 28 апреля 2009

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

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

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

Будем весьма благодарны за любые предоставленные вами информационные ссылки.

Ответы [ 3 ]

3 голосов
/ 28 апреля 2009

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>
1 голос
/ 28 апреля 2009

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

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

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

1 голос
/ 28 апреля 2009

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

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

Надеюсь, что поможет

...