Question

我正在尝试使用javascript从html表中删除多个列。它使用的方法是在顶行搜索标记＆＃34; <span></span>＆＃34;如果找到，则删除整个列。列可以是任何具有空span标记的列。如果它没有任何colspan或rowspan标签，它正在工作。但反之亦然。

下表只是一个简短的例子，虽然我附上了我正在处理的实际表格的图像。

enter image description here

这里的问题是＆＃34; rowspan＆＃34;和＆＃34; colspan＆＃34;这让它有点棘手。

这是我的代码

 <!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>

由于

Answer 1

好的，您的代码中的一个问题是，您删除了当前正在使用for进行迭代的单元格。我改变了你的第一个循环来完成所有反向：for (var i = (rows[0].cells.length -1); i >= 0; i--)，从后到前...所以没有索引在删除时发生变化。
第二个问题是你的内部for循环。使用第一个for循环迭代3列并在内循环中假设每行具有相同数量的cols，但事实并非如此。我更改了代码，如果单元格的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]);
                    }
                }
            }
        }
    }
}

演示FIDDLE
已更新演示FIDDLE

使用colspan和rowspan动态删除html表中的多个列

1 个答案: