Генерация HTML-таблицы на стороне клиента

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

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

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

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


generated-code jquery asp.net client-side auto-generate
person cookbr    schedule 27.04.2009    source источник
comment
может ли пользователь впоследствии изменить количество столбцов/строк? если это так, это немного сложнее (все еще выполнимо)   -  person scunliffe    schedule 28.04.2009
comment
Да, пользователь может изменить количество столбцов, количество строк и выбранную форму в любое время. Ожидается, что таблица будет соответствующим образом скорректирована.   -  person cookbr    schedule 28.04.2009

Ответы (3)


arrow_upward
3
arrow_downward

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>
person Mark Brackett    schedule 27.04.2009

arrow_upward
1
arrow_downward

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

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

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

person marcgg    schedule 27.04.2009
comment
Благодарю за ваш ответ. Не могли бы вы уточнить немного больше? Может быть, краткий фрагмент кода или ссылка на страницу с соответствующими фрагментами кода? - person cookbr; 28.04.2009
comment
Через пару сообщений TStamper разместил ссылку на stackoverflow.com/questions/103489/, что выглядело интересно. - person marcgg; 28.04.2009

arrow_upward
1
arrow_downward

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

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

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

person John M Gant    schedule 27.04.2009