Question

我正在尝试使用javascript从html表中删除多个列。它正在使用的逻辑是它在顶行搜索标签＆＃34;＆＃34;然后删除该列。

问题是，如果顶行中只有一个单元格有＆＃39;＆＃39;，那么它会删除那些列，但如果有多列则会抛出错误。

这是我的代码

<!DOCTYPE html>
<html>
<body>
<table style="width:100%" border='1' id='Just_for_california'>
  <tr>
    <td><span></span></td>
    <td>S</td>      
    <td><span></span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

</body>


<script>



    var dataTable_length = document.getElementById('Just_for_california').rows[0].cells.length;
    var count_rows = document.getElementById('Just_for_california').rows.length;
    var column_array = [];
    for(var i=0; i<dataTable_length; i++)
    {
        var str = document.getElementById("Just_for_california").rows[0].cells[i].innerHTML;
        if(str.search("<span></span>") != -1)
        {
            column_array.push(i);
        }

    }
    var len = column_array.length;
    for(var i=count_rows-1 ; i>=0;i--)
    {
        rows_number = document.getElementById('Just_for_california').rows[i];
        console.log("row_number:"+i);

            for(var j=0; j<len;j++)
            {
                rows_number.deleteCell(column_array[j]);
            }

    }




</script>
</html>

Answer 1

发生这种情况是因为删除单元格时错误地计算了索引。我重构了你的代码（使它更清晰），它现在似乎有效：

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

问题是你试图在行中“水平”删除单元格。所以说你要删除索引1和3的单元格，表格中有4列。当您删除第一个单元格1时，它可以正常工作。然而，您向右移动并尝试删除索引3处的单元格。这会失败，因为您已经删除了单元格1，因此不再有索引为3的单元格。现在最大索引是2。因此错误。

在我改进的代码中，我正在“垂直”删除列，因此不会发生这样的问题。

动态删除html表中的多个列

1 个答案:

演示：http://jsfiddle.net/t2q60aag/