Javascript – Dynamically delete multiple columns in html table

htmljavascript

I am trying to delete multiple columns from html table using javascript.
The logic it is using is that it searches in top row for tag "" and then deletes that column.

The problem is if only one cell in top row is having '', then it deletes that columns fine, but if there are multiple columns it throws error.

Here is my code

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

Best Solution

It happens because you calculate indexes incorrectly when you delete cells. I refactored you code (making it clearer) and it seems to work now:

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

The problem is that you are trying to remove cells "horizontally" in the row. So say you want to delete cells at indexes 1 and 3 and there are 4 columns in the table. When you delete the first cell 1 it works fine. However then you move to the right and try to remove cell at index 3. This fails because since you have already removed cell 1, there is no cell with index 3 anymore. The maximum index now is 2. Hence the error.

In my improved code I'm removing columns "vertically", so such an issue can't happen.

Demo: http://jsfiddle.net/t2q60aag/