Javascript 使用jQuery干燥html？

我想创建一个网页，你可以选择一个网格大小。我想向客户展示一个大网格（比如10x10），然后让客户通过点击网格元素来选择大小（类似于在word中选择表格大小）。要做到这一点，我显然需要一个大的网格，元素必须有一个像5，6这样的id来表示它们在表中的位置

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

---

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

非常简单，有两个

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);

var table=document.createElement（'table'），
tbody=table.appendChild（document.createElement（'tbody'），
tr，td，x，y；
对于（y=0；y

---

这将在页面加载后立即可见。

非常简单，有两个

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);

var table=document.createElement（'table'），
tbody=table.appendChild（document.createElement（'tbody'），
tr，td，x，y；
对于（y=0；y

---

这将在页面加载后立即可见。

不管怎样，您都需要js来使用table maker，所以不要担心这一部分。使用js来创建空表是一个很好的用途，而且最好只发送一些用户需要的大量空标记。您仍然需要js来使用table maker，所以不要担心这一部分。使用js来创建空表不是吗able是一个很好的用途，而且更喜欢只发送一些用户需要的大量空标记。+1回答得很好。我只有一件事要做，也许他可以使用JQUERY来正确处理不兼容问题。@gustavodidomenico这里没有不兼容问题。我已经在“是”中介绍了所有这些问题，因此使用JQUERY和避免使用代码覆盖它们：）是的，这是一个普通的旧表。

document.body.appendChild

将其放在文档中，但您可以使用占位符

并执行

document.getElementById（'tableGoesher'）。appendChild（表）；

取而代之。它分三个步骤工作：首先，获取您单击的元素。这将是

t

。其次，进入

parentNode

s，直到您找到

，或者到达

此

（本例中的tbody，因为它是事件附加到的元素）。如果不是

这个

，那么我们找到了一个表单元格，因此获取它的

单元格索引

和行的

行索引

，并提醒他们。+1回答得很好。我只想说一件事，也许他可以使用JQUERY正确处理不兼容问题。@gustavodidomenico这里没有不兼容问题。我已经介绍了t是的，所以使用jquery很简单，并且避免使用代码覆盖它们：）是的，这是一个普通的旧表

document.body.appendChild

将其放入文档中，但您可以使用占位符

并执行

document.getElementById（'TableGoeSher'）.appendChild（table）t

。其次，向上移动

parentNode

s，直到找到

，或者到达

this

（本例中的tbody，因为它是事件附加到的元素）。如果它不是

this

，那么我们找到了一个表单元格，因此获取它的

cellIndex

和行的

rowIndex

，并向它们发出警报。