Фильтр поиска не работает на 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 соответственно. У вас также нет доступа к input event либо до IE9. Мы будем использовать фирму 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);