Dynamically delete multiple columns in html table with colspan and rowspan

Question

I am trying to delete multiple columns from html table using javascript. The approach it is using is that it searches in top row for tag "", if found, then it deletes that whole column. Column can be any which has empty span tags. It is working if it does not has any colspan or rowspan tag. But not working in vice-versa case.

The below table is just a short example, although I have attached the image of actual table I am working on.

enter image description here

The catch here is "rowspan" and "colspan" which makes it a little tricky.

Here is my code

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

Thanks

And if you delete the column containing  then it has to correct the colspan values for the second row and delete the column in the third row too? — algorhythm
– algorhythm, Commented Oct 28, 2014 at 20:43
I've tried something, but it is not really clear which table cells do you want to keep and which can be deleted. Can you update your question and show us the resulting table how you want it to be? And maybe you have a bigger input table to better see how this one is structured... — algorhythm
– algorhythm, Commented Oct 29, 2014 at 7:39
thanks Algorythm for the reply. The above program I wrote can delete a column when there is not rowspan or colspan in the table. The approach remains the same. Just search the top row where the inner html has tag. If found, it will delete that whole column. The column can be any. — mikelee
– mikelee, Commented Oct 29, 2014 at 10:58

algorhythm · Accepted Answer · 2014-10-29 14:03:42Z

3

OK, one problem in your code is, that you delete cells which you are currently iterating with for. I change your first loop to do everything reverse: for (var i = (rows[0].cells.length -1); i >= 0; i--), from back to front... So no indices are changing on deletion.
Second problem is your inner for loop. With first for loop you iterate over 3 columns and in inner loop you assume that every row has the same number of cols, but it isn't. I change the code so, that if the cell has a colspan greater then 1 then decrease the colspan otherwise delete the cell.

The complete updated code is this:

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

And a demo FIDDLE
Updated demo FIDDLE

edited Oct 29, 2014 at 14:03

answered Oct 29, 2014 at 12:24

algorhythm

8,7883 gold badges40 silver badges48 bronze badges

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

3 Comments

mikelee Over a year ago

The above solution works only incase that column has a colspan. If it finds emtpy span tags in which there are no colspan in that column and there are columns before it which has colspan, then it does not shifts towards left. For instance, if you see the above image, there I put had put empty span tags in top row of last columns, then it does not works right.

algorhythm Over a year ago

OK, yeah, that's why I'm asking for a bigger table. My solution only works in this special case discribed in your question. But if you want overall correct solution then you have to do much more... Maybe you should think about a small framework that completely understand the table structure instead of coding it yourself. Have you tried out this for example: redips.net/javascript/table-td-merge-split

algorhythm Over a year ago

I tried an other solution... Is it better for your context?

Collectives™ on Stack Overflow

Dynamically delete multiple columns in html table with colspan and rowspan

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related