我已经看到了相当多的关于添加/删除表格行的内容,但关于添加/删除表格单元格并不多。我正在使用一个表来制作正方形网格,然后将正方形组合成矩形(制作类似俄罗斯方块的形状)。我在创建矩形时删除了几个正方形,设置其“索引单元格”的colspan以填充已删除单元格留下的间隙。后来我需要将这个 - 索引单元格反转回正方形,然后用编程生成的新元素替换“缺失”元素。
问题是如果我以后需要为下一个形状删除任何这些生成的单元格,程序找不到它们。我可以在DOM上看到它们甚至检查它们的类/ ID,但是对于程序它们是不可见的(不能通过jQuery id或类选择器选择)。提示:这些单元格的cellindex为-1 - 好像表格认为它们被附加在DOM层次结构中的其他位置。
这是HTML:
<td class="cell"></td>
<td class="cell"></td>
<td class="cell enterBtn" colspan="3" rowspan="1" id="enterBtn"></td>
<td class="cell"></td>
<td class="cell"></td>
这是JavaScript在将矩形返回到方形后尝试创建“填充”单元格:
// ======= ======= ======= unMergeArea ======= ======= =======
Game.prototype.unMergeArea = function(whichArea) {
var indexCell = this.tableCellsArray[whichArea.iR][whichArea.iC];
$(indexCell).attr("colSpan", 1);
$(indexCell).attr("rowSpan", 1);
for (var j = 0; j < whichArea.iH; j++) {
for (var i = 0; i < whichArea.iW; i++) {
if (!((i == 0) && (j == 0))) {
var newCell = document.createElement("td");
$(indexCell).after(newCell);
$(newCell).addClass("cell");
}
}
}
$(indexCell).removeClass(whichArea.class);
$(indexCell).addClass("cell");
return indexCell;
}
这里的脚本稍后会删除另一个矩形的单元格来填写。程序找不到“nextCell”:
// ======= ======= ======= mergeArea ======= ======= =======
Game.prototype.mergeArea = function(whichArea) {
var nextCell;
var indexCell = this.tableCellsArray[whichArea.iR][whichArea.iC];
for (var j = 0; j < whichArea.iH; j++) {
for (var i = 0; i < whichArea.iW; i++) {
if (!((i == 0) && (j == 0))) {
nextCell = $(this.tableCellsArray[whichArea.iR + j][whichArea.iC + i]);
$(nextCell).remove();
$(nextCell).addClass("gone");
}
}
}
}
$(indexCell).attr("colSpan", whichArea.iW);
$(indexCell).attr("rowSpan", whichArea.iH);
$(indexCell).addClass(whichArea.class);
return indexCell;
}
有什么想法?这一直很痛苦!