javascript - 隐藏特定列右侧的整列，占 rowspan 和 colspan

Question

我有这张 table http://codepen.io/MetCastle/pen/lxceL我想使用 jQuery 根据 input type="number" 隐藏/显示列。表示整个列:

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

我不知道该怎么做。我试过 :nth-child() 选择器，但我不明白它是如何工作的。

我做了这个功能，但显然它是不完整的:

$(document).ready(function() {

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

  });

Answer 1

这里非常灵活地考虑了 colspans...我认为这对你有用:

JSFiddle : (我把 2 放在 .size 值中，所以你会看到它删除了“Proveedor 2”和它下面的列，你可以在 fiddle 的 HTML 部分更改它以使用不同的数字进行测试)

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

注意:

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

前面的+就是把这个转换成数字(从字符串)。如果 colspan 未定义，它将等同于一个假值 (NaN)，然后将移至 1(如果 colspan，则为默认值未定义)...因此，如果定义了 colspan，它将是定义的任何内容，否则将为 1。

---

明确了一些需求后，这里进行修改。处理 colspans 和 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;
            });
        });
    }
});