使用jQuery过滤多个选择表

Question

我有一个包含多列的表，我想使用多个选择来过滤它。每个选择对应于特定列。当选择更改时，该表将仅显示与select对应的列具有相同值的行。

我开始有点JSFiddle。任何想法都会有所帮助。

到目前为止我做了什么：

var filter = $('select');

filter.change(function() {
    var table = $('table');
    var rows = $('tr');
    var filterValue = $(this).val();
});

http://jsfiddle.net/ibnclaudius/BnPa6/15/

Answer 1

根据我的理解，你试图突出显示的td等于所选的选项。

var filter = $('select');
filter.change(function () {
    var table = $('table');
    var rows = $('tr');
    var filterValue = $(this).val();
    $('tr td').css('color', 'black')
    $('tr td').each(function () {
        if (filterValue == $(this).text()) {  // I have testing for the matches
            $(this).css('color', 'red')
        }
    });
});

以下是您必须知道使用 td

重复.each() 的关键点

这是jsFiddle

希望你明白。

更新

1）获取被点击的选择的标签名称

var col = $(this).parent().find('label').text();

2）这里我使用下面的行

获取列号

var colNumber = col.replace("Column ", "")

这将返回正在选择的选择的列号。

3）在answer的帮助下，我找到了迭代列的方法。

现在你了解更多深度。

$("table tr td:nth-child(" + colNumber + ")").each(function () {
        if (filterValue == $(this).text()) {
            $(this).css('color', 'red');
        }
    });

JSFiddle1

对于您的第一条评论，只需触发 change 事件，如下所示

$('select').change();

JSFiddle2

Answer 2

jsfiddle链接不起作用。一个片段会有所帮助。

如果要对行中可用的每个td使用过滤器，可以使用以下脚本：

(function(document) {
	'use strict';

	var LightTableFilter = (function(Arr) {

		var _input;

		function _onInputEvent(e) {
			_input = e.target;
			var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
			Arr.forEach.call(tables, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, _filter);
				});
			});
		}

		function _filter(row) {
			var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('light-table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = _onInputEvent;
				});
			}
		};
	})(Array.prototype);

	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
			LightTableFilter.init();
		}
	});

})(document);

<section class="container">

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

	<table class="order-table table">
		<thead>
			<tr>
				<th>Column 1</th>
				<th>Column 2</th>
				<th>Number 2</th>
				<th>Number 2</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Column One</td>
				<td>Two</td>
				<td>352353</td>
				<td>1</td>
			</tr>
			<tr>
				<td>Column Two</td>
				<td>Two</td>
				<td>4646</td>
				<td>2</td>
			</tr>
		</tbody>
	</table>

</section>