jquery - 客户端生成 HTML 表

Question

(ASP.NET Web 应用程序)我想创建一个允许用户构建 HTML 表的页面。将向用户提供以下控件:用于定义表中行数的文本框、用于定义表中列数的文本框以及形状的项目符号列表(例如正方形、八边形等) )将显示在每个单元格内。

当用户在每个控件中输入值时，我想根据现有值构建并显示表格。我想在客户端处理 HTML 表代码的生成。

我有什么选择？我遇到了number of articles我相信这可能有用，但我无法将所有内容组合在一起并收集适用的方法；我对客户端脚本编写经验很少，但是如果它能带来干净、高效的解决方案，我不会回避学习曲线(程序员会怎样？)。

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

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>