搜索过滤器无法在IE 8上运行

时间:2014-10-29 19:03:07

标签: javascript jquery internet-explorer-8

我正在使用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>

3 个答案:

答案 0 :(得分:1)

当您希望在旧版浏览器中支持现代脚本时,您肯定会在某些方面需要进行一些调整。正如您已正确识别的那样,getElementsByClassName将无法在Internet Explorer 8中使用 - 因此您明智地决定使用jQuery,这可以在旧版环境中提供类似的功能。

您要放弃的其他事项包括Array.prototype.forEachaddEventListenertextContent。幸运的是,这些都可以分别用jQuery.fn.eachjQuery.fn.onjQuery.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() )

答案 1 :(得分:0)

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

或者只是

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

答案 2 :(得分:0)

如果你选择沿着jQuery路线走下去

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