生成 HTML 表格客户端答案

【问题标题】：Generate HTML Table Client Side生成 HTML 表格客户端
【发布时间】：2009-04-27 20:07:47
【问题描述】：

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

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

我有哪些选择？我遇到了number of articles，我认为它可能有用，但我无法将所有内容拼凑在一起并收集适用的方法；我在客户端脚本方面几乎没有经验，但是如果它会产生一个干净、高效的解决方案，我不会回避学习曲线（程序员会怎样？）。

如果您能提供任何信息链接，我们将不胜感激。

【问题讨论】：

用户之后可以更改列数/行数吗？如果是这样，这涉及更多（仍然可行）
是的，用户可以随时更改列数、行数和选定的形状。该表将相应地自行调整。

标签： jquery asp.net auto-generate generated-code client-side

【解决方案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>

【讨论】：

【解决方案2】：

我看起来你想做一些非常具体的事情，所以你必须进行自定义构建。我想说看看 JQuery (http://jquery.com/)，这是编写自定义 javascript 而无需花费数小时重新发明轮子的最佳方法之一。 Google上有很多很好的教程。

编辑：添加元素（您的案例的表格行）并设置它们的属性有很简单的方法。如果需要，您还可以使用 AJAX 调用来保存所有这些。

希望有帮助

【讨论】：

感谢您的回复。你能详细说明一下吗？也许是一个简短的代码 sn-p 或一个带有相关代码 sn-ps 的页面的链接？
TStamper 一对夫妇在一个帖子之外发布了一个指向 stackoverflow.com/questions/103489/… 的链接，看起来很有趣。

【解决方案3】：

如果您真的想在客户端构建表格，您可以针对 HTML DOM 进行编程。创建一个表对象并添加行和列应该没什么大不了的。您可以在 for 循环中使用文本框的值作为控制变量。有关要使用的 DOM 对象，请参阅 the W3Schools tutorial。在客户端添加形状应该像在 td 元素中添加图像对象（或 img 标签）一样简单。

我自己没有做过，但根据您的描述，这听起来像是可以在客户端用 JavaScript 完成的事情，而无需大量的努力。也就是说，我肯定会考虑在服务器上做，除非你真的需要在客户端。

编辑： 顺便说一句，我对 jQuery 了解不多。使用该库可能有一种更简单的方法。但是纯JS的方式应该不会太毛。

【讨论】：