1

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

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

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

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

4

3 回答 3

3

带有几个嵌套循环的 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>
于 2009-04-27T20:36:33.013 回答
1

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

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

希望有帮助

于 2009-04-27T20:13:39.213 回答
1

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

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

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

于 2009-04-27T20:18:14.057 回答