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

Question

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

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

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

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

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

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

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