javascript - 使用 jQuery 干燥 html？

Question

我想创建一个网页，您可以在其中选择网格大小。我想通过向客户展示一个大网格(例如 10x10)来实现此目的，然后让他通过单击网格元素来选择大小(类似于在 Word 中选择表格大小的方式)。为此，我显然需要一个大网格，并且元素必须有一个像 5、6 这样的 id 来表示它们在表中的位置。

当然我可以手工创建这个表，也就是手工写出所有的html代码。这不会花很长时间，但也不是很干燥。我的想法是使用带有循环的 Javascript 自动创建一个字符串，该字符串是表的 html 代码，然后使用 jQuery 将某些 div 的 html 属性设置为该字符串。

这会是一个优雅的解决方案还是会被认为很糟糕，因为我必须在页面上显示任何内容之前执行客户端脚本？如果它不优雅，那么优雅的解决方案是什么？

Answer 1

只需几个 for 循环就足够简单了:

var table = document.createElement('table'),
    tbody = table.appendChild(document.createElement('tbody')),
    tr, td, x, y;
for( y=0; y<10; y++) {
    tr = tbody.appendChild(document.createElement('tr'));
    for( x=0; x<10; x++) {
        td = tr.appendChild(document.createElement('td'));
    }
}
tbody.onclick = function(e) {
    e = e || window.event;
    var t = e.srcElement || e.target;
    while( t != this && t.nodeName != "TD") t = t.parentNode;
    if( t != this) {
        alert("You clicked on cell "+t.cellIndex+" in row "+t.parentNode.rowIndex+"!");
    }
};
document.body.appendChild(table);

这是对 JavaScript 的完全有效的使用，因为无论如何您都将使用 JS 来处理点击(可能!)，并且它使事情变得更加容易。

编辑:如果短暂的延迟 Not Acceptable ，您可能需要考虑使用服务器端语言，例如 PHP:

<?php
echo "<table><tbody>";
for( $y=0; $y<10; $y++) {
    echo "<tr>";
    for( $x=0; $x<10; $x++) {
        echo "<td></td>";
    }
    echo "</tr>";
}
echo "</tbody></table>";
?>

页面加载后即可看到。