客户端生成 HTML 表

Question

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

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

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

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

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，而无需花费数小时重新发明轮子。 谷歌上有很多很好的教程。

编辑：有一些简单的方法可以添加元素（适合您的案例的表行）并设置其属性。 如果需要的话，您还可以使用 AJAX 调用来保存所有内容。

希望有帮助

Answer 3

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

我自己没有做过，但根据你的描述，这听起来像是可以在客户端用 JavaScript 完成的事情，而不需要付出巨大的努力。 也就是说，我肯定会考虑在服务器上执行此操作，除非您确实需要在客户端上执行它。

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