我正在尝试使用 javascript 从 html 表中删除多列。它使用的方法是在顶行搜索标签“<span></span>”，如果找到，则删除整列。列可以是任何具有空 span 标签的列。如果它没有任何 colspan 或 rowspan 标签，它就可以工作。但反之亦然。
下表只是一个简短的例子，尽管我附上了我正在处理的实际表格的图片。
这里的问题是“rowspan”和“colspan”，这让它有点棘手。
这是我的代码
<!DOCTYPE html>
<html>
<body>
<table style="width:100%" border='1' id='Just_for_california'>
<tr>
<td rowspan='2'><span></span></td>
<td>S</td>
<td><span></span></td>
</tr>
<tr>
<td colspan='2'>Jackson</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
<script>
var table = document.getElementById('Just_for_california'),
rows = table.rows;
for (var i = 0; i < rows[0].cells.length; i++) {
var str = rows[0].cells[i].innerHTML;
if (str.search("<span></span>") != -1) {
for (var j = 0; j < rows.length; j++) {
rows[j].deleteCell(i);
}
}
}
</script>
</html>
谢谢
最佳答案
- 好的，您的代码中的一个问题是，您删除了当前正在使用
for迭代的单元格。我将您的第一个循环更改为反向执行所有操作:for (var i = (rows[0].cells.length -1); i >= 0; i--)，从后到前。 .. 所以没有索引在删除时发生变化。 - 第二个问题是您的内部
for循环。在第一个for循环中，您迭代了 3 列，在内部循环中，您假设每一行都有相同数量的列，但事实并非如此。我更改了代码，如果单元格的colspan大于 1，则减小colspan否则删除单元格。
完整的更新代码是这样的:
var countColumns = function(table) {
if (!table || !table.tagName || table.tagName != 'TABLE') { throw new Error("The parameter 'table' must be a <table> DOM element."); }
var maxColumnsCount = 0;
for (var i = 0; i < table.rows.length; i++) {
maxColumnsCount = Math.max(table.rows[i].cells.length, maxColumnsCount);
}
return maxColumnsCount;
};
var table = document.getElementById('Just_for_california');
var rows = table.rows;
for (var i = (countColumns(table) -1); i >= 0; i--)
{
var str = '';
var cellToDelete = [];
if (rows[0].cells[i] != undefined) {
str = rows[0].cells[i].innerHTML;
cellToDelete.push(i);
} else if (rows[0].cells[i -1].colSpan > 1) {
str = rows[0].cells[i -1].innerHTML;
cellToDelete.push(i -1);
cellToDelete.push(i);
}
if (str.search("<span></span>") != -1) {
for (var j = 0; j < rows.length; j++)
{
for (var k = 0; k < cellToDelete.length; k++) {
if (rows[j].cells[cellToDelete[k]] != undefined) {
if (rows[j].cells[cellToDelete[k]].colSpan > 1) {
rows[j].cells[cellToDelete[k]].colSpan -= 1;
} else {
rows[j].deleteCell(cellToDelete[k]);
}
}
}
}
}
}
关于javascript - 使用 colspan 和 rowspan 动态删除 html 表中的多列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26617975/