使用 jQuery 过滤具有多个选择的表

Question

我有一个包含多个列的表，我想使用多个选择对其进行过滤。每个选择对应一个特定的列。 When a select change, the table will show only rows where the column correspondent to the select has the same value.

我已经开始了一点 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')
        }
    });
});

您必须知道的关键点是使用 .each()

迭代 tds

这是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

对于您的第一个 cmets，只需触发 change 事件，如下所示

$('select').change();

JSFiddle2

Answer 2

jsfiddle 链接不起作用。一个 sn-p 会有所帮助。

如果您想对行中可用的每个 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>