搜索过滤器不适用于 IE 8

Question

我正在使用http://codepen.io/anon/pen/gKrln 复制代码并将其与我的表格数据混合。 它适用于 Firefox 和 chrome。

我有零钱：

 document.getElementsByClassName('light-table-filter2');

致inputs = $(".light-table-filter");

但我不确定我会如何改变 document.getElementsByClassName(_input.getAttribute('data-table')); 让它在 IE8 上运行？

我所做的更改仅适用于 firefox 和 chrome ，我怎样才能让它在 IE8 上运行？

var LightTableFilter;

LightTableFilter = (function() {
  var _filter, _input, _onInputEvent;
  _input = null;
  _onInputEvent = (function(_this) {
    return function(e) {
      var row, table, tables, tbody, _i, _j, _k, _len, _len1, _len2, _ref, _ref1;
      _input = e.target;

      tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      for (_i = 0, _len = tables.length; _i < _len; _i++) {
        table = tables[_i];
        _ref = table.tBodies;
        for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
          tbody = _ref[_j];
          _ref1 = tbody.rows;
          for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
            row = _ref1[_k];
            _filter(row);
          }
        }
      }
    };
  })(this);
  _filter = function(row) {
    var len, n, text, val, vals, _i, _len;
    text = row.textContent.toLowerCase();
    vals = _input.value.toLowerCase().split(' ');
    len = vals.length;
    n = 0;
    for (_i = 0, _len = vals.length; _i < _len; _i++) {
      val = vals[_i];
      if (text.indexOf(val) !== -1) {
        n++;
      }
    }
    return row.style.display = n === len ? 'table-row' : 'none';
  };
  return {
    init: function() {
      var input, inputs, _i, _len, _results;
      inputs = $(".light-table-filter");

      _results = [];
      for (_i = 0, _len = inputs.length; _i < _len; _i++) {
        input = inputs[_i];
        _results.push(input.oninput = _onInputEvent);
      }
      return _results;
    }
  };
})();

这是正文：

<section class="container">

    <input type="search" class="light-table-filter" data-table="order-table"  />

    <table  class="order-table"  >
      <thead><th>Name</th><th>Department</th><th>Ext:</th><th>Email</th><th>Title Name</th><th>Cell Phone</th></thead>
    <tbody>
    <cfoutput query="Branch"  >
    <tr>

        <td >#emp_namefirst#  </td> 
    <td >#dept_name#</td>       
        <td >#emp_ext#</div></td>
        <td >#EMP_EMAIL#  </td>

    </tr>
    </cfoutput>
    </tbody>
    </table>

</section>

Answer 1

当您希望在旧版浏览器中支持现代脚本时，您肯定会有一些地方需要进行一些调整。正如您已经正确确定的那样，getElementsByClassName 在 Internet Explorer 8 中不可用 - 因此您做出了明智的决定，使用 jQuery，它可以在旧环境中提供类似的功能。

您将放弃的其他内容包括 Array.prototype.forEach、addEventListener 和 textContent。幸运的是，这些都可以分别替换为jQuery.fn.each、jQuery.fn.on 和jQuery.fn.text。在 IE9 之前，您也无法访问 input event。我们将使用专有的propertychange event 作为input 事件的后备。

进行这些更改后，我们看到了大大简化的脚本：

(function () {

    "use strict";

    var LightTableFilter = (function () {

        var _input, _row;

        function _onInputEvent ( event ) {
            _input = $( this );
            $( "tr:gt(0)", "." + _input.attr( "data-table" ) ).each( _filter );
        }

        function _filter () {
            _row = $( this );
            _row.toggle( _row.text().indexOf( _input.val() ) > -1 );
        }

        return {
            init: function () {
                $( ".light-table-filter" ).on( "input propertychange", _onInputEvent );
            }
        };

    })();

    $( LightTableFilter.init );

})();

请确保您使用 1.x 版本的 jQuery，因为 2.x 分支适用于 Internet Explorer 9 及更高版本。您可以在线测试上述脚本：http://jsfiddle.net/md18wvy2/15/。

如果不需要保留上述结构，您可以将其进一步折叠成类似于以下内容：

(function ( $ ) {

    "use strict";

    // By passing our init function into $, it will be caused when the DOM is ready
    $(function init () {
        // Call our filter function on every input event of any .light-table-filter
        $( ".light-table-filter" ).on( "input propertychange", function filter ( event ) {
            // Find every tr in the corresponding table, and loop over them
            $( "tr", "." + $( this ).attr( "data-table" ) ).each(function toggle () {
                var row = $( this );
                // Show/Hide current tr based on presence of a substring
                row.toggle( row.text().indexOf( event.target.value ) > -1 );
            });
        });
    });

})( jQuery );

您可以通过http://jsfiddle.net/md18wvy2/14/ 在线测试。

上述方法都使用大小写敏感过滤。如果您想让过滤大小写-不敏感，您需要遵循原始脚本的方向并在检查子字符串之前标准化输出：

_row.text().toLowerCase().indexOf( _input.val().toLowerCase() )

Answer 2

var myAttribute = $(_input).attr('data-table');
var myElements = $('.' + myAttribute);

或者干脆

var myElements = $('.' + $(_input).attr('data-table'));

Answer 3

如果你选择走 jQuery 路线

var className = $(_input).attr('data-table');
tables = $('.' + className);