如何使用引导下拉菜单通过 JavaScript 过滤表？

Question

我认为我的问题比我在互联网上看到的要复杂一些，因为我需要在一张桌子上进行多次过滤。所以这是我的代码：

function searchTable() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("table");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

#table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  margin-top: 20px;
}

#table th,
#table td {
  text-align: left;
  padding: 12px;
}

#table tr {
  border-bottom: 1px solid #ddd;
}

#table tr.header,
#table tr:hover {
  background-color: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
  <input class="form-control" id="search" onkeyup="searchTable();" placeholder="search distribution" name="s" autocomplete="off" autofocus>
  <div class="input-group-btn">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Devices</button>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="javascript:void(0)" onclick="">Desktop</a>
      <a class="dropdown-item" href="javascript:void(0)">Mobile</a>
      <a class="dropdown-item" href="javascript:void(0)">Tablet</a>
    </div>
  </div>
</div>
<table id="table" class="table-striped table-hover">
  <tr class="header">
    <th style="width:35%;">Distribution</th>
    <th style="width:35%;">Supported devices</th>
    <th style="width:20%;">Download</th>
  </tr>
  <tr>
    <td>Glass '17</td>
    <td>Desktop & Mobile</td>
    <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
  </tr>
  <tr>
    <td>Glass '17</td>
    <td>Tablet</td>
    <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
  </tr>
  <tr>
    <td>Other distribution</td>
    <td>Mobile</td>
    <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
  </tr>
  <tr>
    <td>Distribution 3</td>
    <td>Tablet & Mobile</td>
    <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
  </tr>
</table>

seachTable() 函数用于根据<td>（第一个孩子）的内容过滤表格。我想要实现的也是按设备类型过滤表。困难的部分是，一些发行版支持不止一种设备类型。

---

我尝试了什么？

function searchTable() {
  var input, filter, table, tr, td, i;

  var input = document.getElementById("search");
  var filter = input.value.toUpperCase();
  var table = document.getElementById("table");
  var tr = table.getElementsByTagName("tr");

  for (var i = 1; i < tr.length; i++) {
    var tds = tr[i].getElementsByTagName("td");
    var firstCol = tds[0].textContent.toUpperCase();
    var secondCol = tds[1].textContent.toUpperCase();
    if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}

function searchTableDevice(device) {
  var filter, table, tr, td, i;

  $("#deviceSelector").html(device);

  var filter = device.toUpperCase();
  var table = document.getElementById("table");
  var tr = table.getElementsByTagName("tr");
  if (device == "all") {
    $("#table tr").css("display", "");
    $("#deviceSelector").html("Devices");
  } else {
    searchTable();
    for (var i = 1; i < tr.length; i++) {
      var tds = tr[i].getElementsByTagName("td");
      var secondCol = tds[1].textContent.toUpperCase();
      if (secondCol.indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

#table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  margin-top: 20px;
}

#table th,
#table td {
  text-align: left;
  padding: 12px;
}

#table tr {
  border-bottom: 1px solid #ddd;
}

#table tr.header,
#table tr:hover {
  background-color: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
  <input class="form-control" id="search" onkeyup="searchTable();" placeholder="search distribution" name="s" autocomplete="off" autofocus>
  <div class="input-group-btn">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="deviceSelector">
						  Devices
						</button>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Desktop</a>
      <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Mobile</a>
      <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Tablet</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice('all')">All</a>
    </div>
  </div>
</div>
<table id="table" class="table-striped table-hover">
  <tr class="header">
    <th style="width:35%;">Distribution</th>
    <th style="width:35%;">Supported devices</th>
    <th style="width:20%;">Download</th>
  </tr>
  <tr>
    <td>Glass '17</td>
    <td>Desktop & Mobile</td>
    <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
  </tr>
  <tr>
    <td>Glass '17</td>
    <td>Tablet</td>
    <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
  </tr>
  <tr>
    <td>Other distribution</td>
    <td>Mobile</td>
    <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
  </tr>
  <tr>
    <td>Distribution 3</td>
    <td>Tablet & Mobile</td>
    <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
  </tr>
</table>

我尝试创建一个新函数searchTableDevice()，其内容与searchTable() 相似，但不是从输入中获取文本，而是从下拉列表中的<a> 元素中获取文本。发生了什么？ searchTable() 将 style.display = "block" 设置为与输入文本匹配的行，并且还显示了由 seacrhTableDevice() 隐藏的行。我完全不知道该怎么做。

---

任何帮助都将受到高度赞赏和欢迎。提前致谢！

Answer 1

工作代码。

$(function () {
	$('#search').on('input', function () {
		searchRow();
	});
})

function searchRow() {
	var $rows = $('#table > tbody > tr').not(".header");
	var val1 = $.trim($('#search').val()).replace(/ +/g, ' ').toLowerCase();
	var val2 = $.trim($("#deviceSelector").text()).toLowerCase();
	val2 = (val2 === "devices") ? "" : val2;

	$rows.show().filter(function () {
		var text1 = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase();
		var text2 = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
		return !~text1.indexOf(val1) || !~text2.indexOf(val2);
	}).hide();
}

function searchTableDevice(device) {
	var filter, table, tr, td, i;

	$("#deviceSelector").html(device);

	if (device == "all") {
		$("#deviceSelector").html("Devices");
	}

	searchRow();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<style type="text/css">
	#table {
		border-collapse: collapse;
		width: 100%;
		border: 1px solid #ddd;
		margin-top: 20px;
	}

	#table th,
	#table td {
		text-align: left;
		padding: 12px;
	}

	#table tr {
		border-bottom: 1px solid #ddd;
	}

	#table tr.header,
	#table tr:hover {
		background-color: #f1f1f1;
	}
</style>

<div class="input-group">
	<input class="form-control" id="search" placeholder="search distribution" name="s" autocomplete="off"
		autofocus>
	<div class="input-group-btn">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
			id="deviceSelector">
					  Devices
					</button>
		<div class="dropdown-menu dropdown-menu-right">
			<a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Desktop</a>
			<a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Mobile</a>
			<a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)">Tablet</a>
			<div role="separator" class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice('all')">All</a>
		</div>
	</div>
</div>

<table id="table" class="table-striped table-hover">
	<tr class="header">
		<th style="width:35%;">Distribution</th>
		<th style="width:35%;">Supported devices</th>
		<th style="width:20%;">Download</th>
	</tr>
	<tr>
		<td>Glass '17</td>
		<td>Desktop & Mobile</td>
		<td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
	</tr>
	<tr>
		<td>Glass '17</td>
		<td>Tablet</td>
		<td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
	</tr>
	<tr>
		<td>Other distribution</td>
		<td>Mobile</td>
		<td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
	</tr>
	<tr>
		<td>Distribution 3</td>
		<td>Tablet & Mobile</td>
		<td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
	</tr>
</table>