Question

我有一个非常大的HTML表，我根据他们的类显示/隐藏行。代码按照需要工作，但客户端有大约10秒的滞后/冻结。请注意我的示例中的部门数量可能是动态的，因此是疯狂表结构的一些推理。

这是我的JSFiddle

$(function() {
  $("#deptOpt").on('change', function() {
    var dept = $(this).prop('selectedIndex');
    $("#scLDP > tbody > tr").each(function() {
      var x = $(this);
      switch (dept) {
        case 0:
          $("#scLDP > tbody > tr").show();
          break;
        default:
          $("#scLDP > tbody > tr").hide();
          $("#scLDP > tbody > .onHand.dept" + dept).prev().prev().show();
          $("#scLDP > tbody > .onHand.dept" + dept).prev().show();
          $("#scLDP > tbody > .onHand.dept" + dept).show();
          $("#scLDP > tbody > .onHandQ.dept" + dept).show();
          $("#scLDP > tbody > .poss.dept" + dept).show();
          $("#scLDP > tbody > .posq.dept" + dept).show();
          $("#scLDP > tbody > .wos.dept" + dept).show();
          $("#scLDP > tbody > .stP.dept" + dept).show();
          $("#scLDP > tbody > .twmd.dept" + dept).show();
          $("#scLDP > tbody > .grandT").show();
          $("#scLDP > tbody > .onHandGrand").show();
          $("#scLDP > tbody > .onHandQGrand").show();
          $("#scLDP > tbody > .possGrand").show();
          $("#scLDP > tbody > .posqGrand").show();
          $("#scLDP > tbody > .wosGrand").show();
          $("#scLDP > tbody > .stpGrand").show();
          $("#scLDP > tbody > .twmdGrand").show();
          break;
      }
    })
  })
})

Answer 1

我认为你不需要static PyMethodDef HelloMethods[] = { {"hello", mod_hello, METH_VARARGS, "hello(name, /)\n--\n\nGreet somebody."}, {NULL, NULL, 0, NULL} };因为选择者应该找到所有东西。

删除它时，您的代码很快，似乎也会产生相同的结果。

.each

在没有var dept = $(this).prop('selectedIndex'); //$("#scLDP > tbody > tr").each(function() { var x = $(this); switch (dept) { .... .... $("#scLDP > tbody > .twmdGrand").show(); break; } //}) }) })循环►https://jsfiddle.net/dL7zhvfq/

的情况下查看小提琴

Answer 2

您的HTML结构在每个 <tr>元素上只需要一个额外的类值，该元素指示它所属的部门，另一个部分用于总行数。

它也不需要.each循环 - 你不会自己迭代这些行，所以它没有意义。

您的代码将变得更简单，更易于维护：

$("#deptOpt").on('change', function() {
    var dept = this.selectedIndex;
    if (dept === 0) {
        $('#scLDP tr').show();
    } else {
        $('#scLDP tr').hide();
        $('#scLDP tr.dept' + dept).show();
        $('#scLDP tr.total').show();
    }
});

请注意，将.deptN添加到单个<tr>元素意味着您不再需要<td>元素。

另一种方法是为每个部门分别设置一个<tbody>，每个部门都有自己的类。

使用has class来显示/隐藏行会导致滞后和性能下降

2 个答案: