过滤表时如何更新nth-child css？

Question

情况： 我正在从数据库中提取数据并将其作为表格显示在我的网站上。显示时，我使用 nth-child(odd) 和 nth-child(even) 隔行着色，以便更容易查看每一行。我正在使用这个 multifilter JQuery 插件通过在每个输入中输入值来过滤数据。

(function($) {
  "use strict";
  $.fn.multifilter = function(options) {
    var settings = $.extend( {
      'target'        : $('table'),
      'method'    : 'thead' // This can be thead or class
    }, options);

    jQuery.expr[":"].Contains = function(a, i, m) {
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    this.each(function() {
      var $this = $(this);
      var container = settings.target;
      var row_tag = 'tr';
      var item_tag = 'td';
      var rows = container.find($(row_tag));

      if (settings.method === 'thead') {
        // Match the data-col attribute to the text in the thead
        var col = container.find('th:Contains(' + $this.data('col') + ')');
        var col_index = container.find($('thead th')).index(col);
      };

      if (settings.method === 'class') {
        // Match the data-col attribute to the class on each column
        var col = rows.first().find('td.' + $this.data('col') + '');
        var col_index = rows.first().find('td').index(col);
      };

      $this.change(function() {
        var filter = $this.val();
        rows.each(function() {
          var row = $(this);
          var cell = $(row.children(item_tag)[col_index]);
          if (filter) {
            if (cell.text().toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
              cell.attr('data-filtered', 'positive');
            } else {
              cell.attr('data-filtered', 'negative');
            }
            if (row.find(item_tag + "[data-filtered=negative]").size() > 0) {
               row.hide();
            } else {
              if (row.find(item_tag + "[data-filtered=positive]").size() > 0) {
                row.show();
              }
            }
          } else {
            cell.attr('data-filtered', 'positive');
            if (row.find(item_tag + "[data-filtered=negative]").size() > 0) {
              row.hide();
            } else {
              if (row.find(item_tag + "[data-filtered=positive]").size() > 0) {
                row.show();
              }
            }
          }
        });
        return false;
      }).keyup(function() {
        $this.change();
      });
    });
  };
})(jQuery);

创建表时，每个

标签的css默认设置为display: contents;。当我过滤数据时， 标记的显示然后更改为none。我所有的 css 都写在 sass 的外部文件中。第 n 个孩子的 sass 如下所示：

tr:nth-child(even) {
    background-color: $tableHighlight1; // rgb(236, 236, 236)
    @media only screen and (min-device-width : 400px) {
        background: none;
    }
}

tr:nth-child(odd) {
    background-color: $tableHighlight2; // white
    @media only screen and (min-device-width : 400px) {
        background: none;
    }
}

创建表格后，它看起来很棒，各行用颜色隔开。例如：

但是当我过滤数据时，因为在创建 DOM 时为行分配了颜色，所以有可能具有相同颜色的行会排成一行，看起来很糟糕。

我需要知道如何控制它是否是css、scss、javascript、jquery 等。作为参考，我使用php 作为我的后端。创建我的表的代码如下所示：

                     $result = $con->query($query);
                     echo "<table id='vendor-table' class='vendors'>";
                     echo "<thead>";
                     echo "<tr>";
                     echo "<th data-type='text-short'>Status</th>";
                     echo "<th data-type='numeric'>Vendor AP ID</th>";
                     echo "<th data-type='text-long'>Vendor Name</th>";
                     echo "<th data-type='text-long'>Alternate Name</th>";
                     echo "<th data-type='text-long'>Invoice Name</th>";
                     echo "</tr>";
                     echo "</thead>";
                     echo "<tbody>";
                     while($row = $result->fetch_assoc()) {
                        echo "<tr>"; 
                        echo "<td data-title='Status' class='row'>".$row["status"]."</td>";
                        echo "<td data-title='Vendor AP ID' class='row'>".$row["vendor_ap_id"]."</td>";
                        echo "<td data-title='Vendor Name' class='row'>".$row["vendor_name"]."</td>"; 
                        echo "<td data-title='Alternative Name' class='row'>".$row["Alternate_Name"]."</td>";
                        echo "<td data-title='Invoice Name' class='row'>".$row["Invoice_Name"]."</td>";
                        echo "</tr>";
                     }
                     echo "</tbody>";
                     echo "</table>";
                  }

我用来调用 multifilter.js 插件的 jquery 如下所示：

            $(document).ready(function() {
               $('.filter').multifilter();
            });

如果有人对我如何更新 css 以覆盖显示为内容的剩余行有任何资源或知识，我将不胜感激。谢谢你。我希望我留下了足够的信息来帮助您理解我的问题。如果我需要澄清任何事情，请告诉我。

【问题讨论】：

Answer 1

我认为您想要实现的目标仅通过 CSS 是不可能实现的。最好的解决方案是使用 row.detach() 删除表格行并在需要时附加它，而不是使用 row.hide() 和 row.show() 如您的代码所示。

Joseph Marikle 的这个解决方案可能会帮助您更好地理解这一点： How to toggle elements in and out of DOM using jQuery detach() method?