我正在使用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>
答案 0 :(得分: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() )
答案 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);