Question

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

当用户在每个控件中输入一个值时，我想根据现有值构建和显示表。我想在客户端处理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>

Answer 2

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

编辑：有简单的方法来添加元素（表格行为您的情况）并设置其属性。如果需要，您还可以使用AJAX调用来保存所有内容。

希望有所帮助

Answer 3

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

我自己并没有这样做，但根据你所描述的内容，听起来像是可以在客户端使用JavaScript完成的事情，而无需花费大量精力。也就是说，我肯定会考虑在服务器上进行，除非你真的需要它在客户端。

修改顺便说一下，我对jQuery了解不多。使用该库可能有一种更简单的方法。但纯粹的JS方式不应该太毛茸茸。

生成HTML表客户端

3 个答案: