Dynamically delete multiple columns in html table

Question

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>

what error does it throw?

Quince
– Quince

2014-10-28 15:29:06 +00:00
Commented Oct 28, 2014 at 15:29 — Quince
– Quince, Commented Oct 28, 2014 at 15:29
Are you using jQuery or pure JS?

ReeCube
– ReeCube

2014-10-28 15:32:55 +00:00
Commented Oct 28, 2014 at 15:32 — ReeCube
– ReeCube, Commented Oct 28, 2014 at 15:32
Added the whole code.

mikelee
– mikelee

2014-10-28 15:47:16 +00:00
Commented Oct 28, 2014 at 15:47 — mikelee
– mikelee, Commented Oct 28, 2014 at 15:47

dfsq · Accepted Answer · 2014-10-28 16:02:52Z

6

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/

edited Oct 28, 2014 at 16:02

answered Oct 28, 2014 at 15:53

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mikelee Over a year ago

Thank you dfsq. But here comes another question.. What if we are using colspan or rowspan? in that case the scenario would change completly. Any suggestion? bdw. ur code is really efficient.

dfsq Over a year ago

Maybe yes, colspans probably make everything more interesting. If you have such situation I think it's worth separate question, because it can be pretty verbose solution (or maybe not, not sure yet).

Collectives™ on Stack Overflow

Dynamically delete multiple columns in html table

1 Answer 1

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

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related