Javascript jQuery按钮，根据分配给表行的类筛选HTML表
我的代码有问题，我一直在阅读建议和代码，虽然我已经接近了，但我还没有得到我想要的 背景：Javascript jQuery按钮，根据分配给表行的类筛选HTML表,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的代码有问题，我一直在阅读建议和代码，虽然我已经接近了，但我还没有得到我想要的 背景： 我有一个HTML页面，这是我上周左右一直在做的，我已经设法用它完成了很多很酷的东西。（一个基于我输入的文本进行搜索的搜索栏，一个在我单击表格标题时对表格行进行排序的表格分类器，以及一些非常酷的CSS格式。） 我想添加的内容： 所以我已经完成了上面所有很酷的事情，现在我想在表格标题上方的HTML页面中添加一些按钮，这将完成以下操作。当我单击其中一个按钮时，我希望我的表只显示与某些预定义类匹配的表行。下面将详细
我有一个HTML页面，这是我上周左右一直在做的，我已经设法用它完成了很多很酷的东西。（一个基于我输入的文本进行搜索的搜索栏，一个在我单击表格标题时对表格行进行排序的表格分类器，以及一些非常酷的CSS格式。） 我想添加的内容：
所以我已经完成了上面所有很酷的事情，现在我想在表格标题上方的HTML页面中添加一些按钮，这将完成以下操作。当我单击其中一个按钮时，我希望我的表只显示与某些预定义类匹配的表行。下面将详细介绍。（按钮可以是单选按钮，也可以是普通按钮-无所谓。） 我所尝试的：
我尝试过各种代码片段，并取得了一些成功。我可以通过按下一个按钮，根据类过滤表中的行。小问题是它会隐藏表头，我无法让它再次显示所有行。（FML对吗？） 到目前为止我的代码的简化版本：
我已经去掉了不少不相干的东西
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' type='text/css' href='css/styles.css'>
<script type="text/javascript" src="__jquery.tablesorter/jquery-latest.js"></script>
<script type="text/javascript" src="__jquery.tablesorter/jquery.tablesorter.js"></script>
<script src="lib/w3.js"></script>
// call the tablesorter plugin
<script type="text/javascript" id="js">$(document).ready(function() {
$("table").tablesorter({
sortList: [[0,0],[0,0]]
});
}); </script>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th><th>Username</th><th >PasswordExpired</th><th>DaysRemaining</th><th>Roaming</th><th>Exempt</th><th>Violation</th><th>Note</th>
</tr>
</thead>
<tbody>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>47</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Exempt"><td>Username</td><td>email@comapny.com</td><td>False</td><td>N/A</td><td>False</td><td>True</td><td>False</td><td>The password of this account never expires</td></tr>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>44</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Soon"><td>Username</td><td>email@comapny.com</td><td>False</td><td>3</td><td>False</td><td>False</td><td>False</td><td>Imminent Expiration. Mail Sent</td></tr>
<tr class="Inactive"><td>Username</td><td>email@comapny.com</td><td>True</td><td>N/A</td><td>False</td><td>False</td><td>False</td><td>This account has not logged into the domain in more than 90 days.</td></tr>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>53</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Healthy"><td>Username</td><td>aemail@comapny.com</td><td>False</td><td>51</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>88</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>53</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
</tbody>
</table>
</body>
</html>
//调用tablesorter插件
$（文档）.ready（函数（）{
$（“表”）.tablesorter({
排序列表：[[0,0]，[0,0]]
});
});
NameUserNamePasswordExpiredDaysRemainingRoamingExcemptViolationNote
Usernameemail@comapny.comFalse47FalseFalseFalseHealthy密码状态
Usernameemail@comapny.comFalseN/AFALSETRUEFALSE此帐户的密码永不过期
Usernameemail@comapny.comFalse44FalseFalseFalseHealthy密码状态
Usernameemail@comapny.comFalse3FalseFalseFalseImminent到期发送的邮件
Usernameemail@comapny.comTrueN/AfalSefalseFalse此帐户已超过90天未登录域。
Usernameemail@comapny.comFalse53FalseFalseFalseHealthy密码状态
Usernameaemail@comapny.comFalse51FalseFalseFalseHealthy密码状态
Usernameemail@comapny.comFalse88FalseFalseFalseHealthy密码状态
Usernameemail@comapny.comFalse53FalseFalseFalseHealthy密码状态
因此，我希望能够有几个按钮，我可以单击这些按钮，根据列出的类（健康/豁免/很快/非活动）过滤我的表行 结论：
HTML和CSS我能够相当快地学会，并且应该能够适应您建议的任何代码。有谁能提供一些易于理解和适应的代码吗？给你，注释中的解释： （请注意，代码可以更好地优化，我将很快更新优化版本）
//调用tablesorter插件
var tableRows=document.getElementsByTagName（'tr'）；
console.dir（tableRows）；
//获取tr标记中的所有元素
//eventListeners被添加到正文中脚本标记内的按钮中
//请参见body标记中的脚本
名称
用户名
密码过期
白昼
漫游
豁免
违反
注
Usernameemail@comapny.comFalse47FalseFalseFalseHealthy密码状态
Usernameemail@comapny.comFalseN/AFALSETRUEFALSE此帐户的密码永不过期
Usernameemail@comapny.comFalse44FalseFalseFalseHealthy密码状态
Usernameemail@comapny.comFalse3FalseFalseFalseImminent到期发送的邮件
Usernameemail@comapny.comTrueN/AfalSefalseFalse此帐户已超过90天未登录域。
Usernameemail@comapny.comFalse53FalseFalseFalseHealthy密码状态
Usernameaemail@comapny.comFalse51FalseFalseFalseHealthy密码状态
Usernameemail@comapny.comFalse88FalseFalseFalseHealthy密码状态
Usernameemail@comapny.comFalse53FalseFalseFalseHealthy密码状态
只有健康的
不久
只有不活跃的
唯一豁免
全部展示
//获取所有按钮
var health=document.getElementById（'health'）；
console.log（健康）；
var soon=document.getElementById（'soon'）；
var inactive=document.getElementById（'inactive'）；
var EXPLOTE=document.getElementById（'EXPLOTE'）；
var all=document.getElementById（'all'）；
//检查每个tr元素是否存在该类
health.addEventListener（'click'，function（））{
对于（var i=1；i tableRows[i].hide（）；
$（“.myClass”）.hide（）；$（“tr”）.show（） <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' type='text/css' href='css/styles.css'>
<script type="text/javascript" src="__jquery.tablesorter/jquery-latest.js"></script>
<script type="text/javascript" src="__jquery.tablesorter/jquery.tablesorter.js"></script>
<script src="lib/w3.js"></script>
// call the tablesorter plugin
<script type="text/javascript" id="js">
var tableRows = document.getElementsByTagName('tr');
console.dir(tableRows);
//get all the elements inside tr tag
//eventListeners are added to the buttons inside the script tag in body
//See the script in the body tag
</script>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>PasswordExpired</th>
<th>DaysRemaining</th>
<th>Roaming</th>
<th>Exempt</th>
<th>Violation</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>47</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Exempt"><td>Username</td><td>email@comapny.com</td><td>False</td><td>N/A</td><td>False</td><td>True</td><td>False</td><td>The password of this account never expires</td></tr>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>44</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Soon"><td>Username</td><td>email@comapny.com</td><td>False</td><td>3</td><td>False</td><td>False</td><td>False</td><td>Imminent Expiration. Mail Sent</td></tr>
<tr class="Inactive"><td>Username</td><td>email@comapny.com</td><td>True</td><td>N/A</td><td>False</td><td>False</td><td>False</td><td>This account has not logged into the domain in more than 90 days.</td></tr>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>53</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Healthy"><td>Username</td><td>aemail@comapny.com</td><td>False</td><td>51</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>88</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
<tr class="Healthy"><td>Username</td><td>email@comapny.com</td><td>False</td><td>53</td><td>False</td><td>False</td><td>False</td><td>Healthy Password Status</td></tr>
</tbody>
</table>
<br/>
<button id="Healthy">Only Healthy</button>
<br/>
<button id="Soon">Only Soon</button>
<br/>
<button id="Inactive">Only Inactive</button>
<br/>
<button id="Exempt">Only Exempt</button>
<br/>
<button id="all">Show All</button>
<br/>
<script>
//get all buttons
var healthy = document.getElementById('Healthy');
console.log(healthy);
var soon = document.getElementById('Soon');
var inactive = document.getElementById('Inactive');
var exempt = document.getElementById('Exempt');
var all = document.getElementById('all');
//check if the class exists for each of the tr element
healthy.addEventListener('click', function() {
for(var i=1; i<tableRows.length; i++) { //loop starts with 1 and not 0 because first element is th
if(tableRows[i].className !== 'Healthy') {
tableRows[i].hidden = true; //hide other than Healthy
} else {
tableRows[i].hidden = false; //display only Healthy
}
}
});
soon.addEventListener('click', function() {
for(var i=1; i<tableRows.length; i++) {
if(tableRows[i].className !== 'Soon') {
tableRows[i].hidden = true;
} else {
tableRows[i].hidden = false;
}
}
});
inactive.addEventListener('click', function() {
for(var i=1; i<tableRows.length; i++) {
if(tableRows[i].className !== 'Inactive') {
tableRows[i].hidden = true;
} else {
tableRows[i].hidden = false;
}
}
});
exempt.addEventListener('click', function() {
for(var i=1; i<tableRows.length; i++) {
if(tableRows[i].className !== 'Exempt') {
tableRows[i].hidden = true;
} else {
tableRows[i].hidden = false;
}
}
});
all.addEventListener('click', function() {
for(var i=1; i<tableRows.length; i++) {
tableRows[i].hidden = false;
}
});
</script>
</body>
</html>
getElementsByTagName => $("tagnamehere")
for loop => for(i = 0; i < $("tagnamehere").length; i++) {}
getElementById => $("#idhere")
all.addEventListener('click', function() {}) => $("#all").bind("click", function() {})
tableRows[i].hidden = true => tableRows[i].hide();