Hide entire column(s) right of specific column accounting for rowspans and colspans

Question

I have this table http://codepen.io/MetCastle/pen/lxceL and I want to hide/show the columns depending on an input type="number" using jQuery. mean this entire columns:

Proveedor 1
Proveedor 2
Proveedor 3
Proveedor 4
Proveedor 5
Proveedor 6

I don't know how to do that. I have tried :nth-child() Selector, but I don't understand how works.

I made this function but obviously it is incomplete:

$(document).ready(function() {

  if ($( ".size").val() == 1)
    // hide Proveedor 1
  else if  ($( ".size").val() == 2)
    // hide Proveedor 2

  });

Answer 1

Pretty flexibly accounting for colspans here... I think this will work for you:

JSFiddle: (I put 2 in the .size value so you will see it removes the "Proveedor 2" and the columns under it, you can change this in the HTML section of the fiddle to test with different numbers)

$(document).ready(function () {
    var column = 0;
    var colspan;
    $("tr").eq(0).find("th").each(function () {
        $this = $(this);
        if ($.trim($this.text()) === "Proveedor "+$(".size").val()) {
            $this.hide();
            colspan = +$this.attr("colspan") || 1;
            return false;
        }
        column += +$this.attr("colspan") || 1;
    });
    $("tr:gt(0)").each(function () {
        var currCol = 0;
        $(this).find("td, th").each(function () {
            $this = $(this);
            if (column === currCol) {
                $this.hide();
                for(i = +$this.attr("colspan") || 1; i < colspan;) {
                    $this = $this.next();
                    $this.hide();
                    i += +$this.attr("colspan") || 1;
                }
                return false;
            }
            currCol += +$this.attr("colspan") || 1;
        });
    });
});

Note:

+$this.attr("colspan") || 1

The + in front is to convert this into a number (from a string). If colspan is undefined it will equate to a falsey value (NaN) which will then move on to the 1 (which is the default if colspan isn't defined)... so if colspan is defined it will be whatever was defined, otherwise it will be 1.

---

After clarifying some requirements, here is a modification. The code gets pretty complex to deal with both colspans and rowspans....

JSFiddle

$(":input").on('change', function () {
    $("td, th").show();
    var column = 0;
    var colspan = 0;
    var rowspanning = [];
    $("tr").eq(0).find("th").each(function () {
        $this = $(this);
        if ($.trim($this.text()) === "Proveedor " + $(".size").val()) {
            $this.nextAll().hide();
            colspan = +$this.attr("colspan") || 1;
            rowspanning[column] = $this.attr("rowspan")-1 || 0;
            return false;
        }
        column += +$this.attr("colspan") || 1;
    });
    if (column) {
        $("tr:gt(0)").each(function () {
            var currCol = 0;
            $(this).find("td, th").each(function () {
                $this = $(this);
                if(rowspanning[currCol] > 0) {
                    --rowspanning[currCol];
                    ++currCol;
                }
                rowspanning[currCol] = $this.attr("rowspan")-1 || 0;
                if (column === currCol) {
                    for (i = +$this.attr("colspan") || 1; i < colspan;) {
                        $this = $this.next();
                        i += +$this.attr("colspan") || 1;
                    }
                    $this.nextAll().hide();
                    return false;
                }
                currCol += +$this.attr("colspan") || 1;
            });
        });
    }
});