隐藏特定列右侧的整列，以考虑行跨度和列跨度

Question

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

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

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

我做了这个功能，但显然它不完整：

$(document).ready(function() {

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

  });

Answer 1

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

JSFiddle: （我在.size 值中添加了 2，因此您会看到它删除了“Proveedor 2”及其下方的列，您可以在小提琴的 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;
            });
        });
    }
});

Answer 2

使用:nth-child() 选择器隐藏每行tr 元素之后的“第n 个”元素。例如，

  if ($( ".size").val() == 1){
      $('tr td:nth-child(1)').hide();
      //include this line only if you also have a thead element with headings
      $('tr th:nth-child(1)').hide();
  }
  else if ($( ".size").val() == 2){
      $('tr td:nth-child(2)').hide();
      //include this line only if you also have a thead element with headings
      $('tr th:nth-child(2)').hide();
  }