Question

我制作了一个脚本来查找表格中的字符串。当它发现它显示行时否则隐藏它。它在Chrome中完美运行，但它在Firefox和Internet Explorer中落后。这段代码是好还是可以更好？

$("#searchValue").keyup(function() {

  var table = $(this).siblings('table').not(':hidden');
  var name = $("#searchValue").val();
  if (name === "") {
    $(table).find('tr').show();
    $(table).trigger('update');
  }
  else {
    name = name.toLowerCase();
    var trs = $(table).find('tr').not(':first');
    trs.each(function() {
      var tr = $(this);
      var count = ($(tr).children('td').length);
      var suc = -1;
      for (var i = 0; i < count; i++) {
        var state = $(tr).children("td").eq(i).html();
        state = state.toLowerCase();
        if (state.match(name)) {
          suc = 1;
        }
        else if (suc !== 1) {
          suc = 0;
        }
      }
      if (suc === 1) {
        $(tr).show();
      }
      else {
        $(tr).hide();
      }
    });

    $(table).trigger('update');
  }
});

表：

  <table id='tableProject' class='tablesorter'>
    <thead>
        <tr>
            <th>Project ID</th>
            <th>Customer</th>
            <th>Description</th>
            <th>Status</th>
            <th>Max Hours</th>
            <th>Achieved</th>
            <th>Difference</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

Answer 1

for循环中的.eq()可能可能（非正面）是导致性能问题的原因。在每个tr中，您说“现在多次遍历DOM，并使用此索引查找td”。

IMO在.each()内使用for循环也是多余的。

避免在此方案中使用.eq()，只需使用.filter()：

Demo

$(function () {
    $("#searchValue").keyup(function () {
        var table = $(this).siblings('table').not(':hidden'),
            name = $("#searchValue").val().toLowerCase();

        if (!name) {
            $(table).find('tr').show();
            $(table).trigger('update');
        } else {
            var trs = $(table).find('tbody tr');

            trs.each(function () {
                var tr = $(this),
                    results = null;

                results = tr.find('td').filter(function () {
                    return $(this).html().toLowerCase().match(name);
                });

                if (!results.length) {
                    tr.hide()
                } else {
                    tr.show();
                }
            });
            $(table).trigger('update');
        }
    });
});

在表jQuery中搜索

1 个答案: