产生HTML表客户边

Question

(ASP.NET 网络应用程序)我想创建一个网页，其中允许用户建立一个HTML表。用户将提供以下控制：文本框用于定义的量的排在该表中，一个文本所使用定义的量的列表，一个列表形状(ex。广场八，等等)这将显示在每个单元。

作为用户进入一个数值在每一个控制，我想建立并显示该表根据现有的价值观。我想处理的产生的HTML表的代码对客户的侧面。

我有什么选择?我遇到一个 数量 的 文章 我认为可能是有用的，但是我无法凑在一起的一切，并收集适用的方法；我有点经验以客户的侧脚本，但是我将不回避一个学习曲线(什么程序员会？) 如果这会导致一种清洁、高效的解决方案。

任何信息链接，可以提供将不胜感激。

Answer 1

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，而不必花费时间重新发明车轮。有很多好的教程。

编辑：有简单的方式来增加的要素(表行对于你的情况)，并设定它们的特性。你也可以使用的AJAX呼吁保存所有，如果这是需要的。

希望帮助

Answer 3

你可以计划对HTML DOM建立的表格如果你真的想这样做对客户的侧面。创建一个表象和加入行列不应该那么大的一笔交易。你会用价值的文本框为控制变量的在于循环。看看 该W3Schools教程 为DOM对象使用。增加的形状的客户端应尽可能简单，因为加入图像的对象(或img标签)内的td的要素。

我没做我自己，但根据你的描述听起来像什么可以做的JavaScript在客户面没有一个巨大的数量努力。这就是说，我肯定会考虑这样做在服务器，除非你真的需要它的客户。

编辑： 顺便说一句，我不知道很多关于习有可能是一个更简单的方式做到这一点，图书馆。但是纯JS的方式不应该太毛茸茸的.