代码如下（暂时没有用原生js实现）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
table{
width: 224px;
height: 50px;
text-align: center;
border-collapse: collapse;
}
table,td,tr,th{
border: 1px solid orange;
}
td,th,tr,thead{
box-shadow: 1px 1px 2px salmon;
padding-top: 5px;
padding-bottom: 5px;
}
tr.parent{
background-color: teal;
color: white;
}
tr.child_row_01,tr.child_row_02,tr.child_row_03{
display: none;
}
.selected{
background-color: darkorange !important;
}
.td_selected{
background-color: salmon !important;
}
input{
margin-bottom: 20px;
}
</style>
</head>
<body>
<input type="text" id="filter">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>年级</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01" >
<td colspan="3">管理科学</td>
</tr>
<tr class="child_row_01">
<td>Olivia</td>
<td>?</td>
<td>?</td>
</tr>
<tr class="child_row_01">
<td>Ethan</td>
<td>?</td>
<td>?</td>
</tr>
<tr class="child_row_01">
<td>Evelyn</td>
<td>?</td>
<td>?</td>
</tr>
<tr class="parent" id="row_02">
<td colspan="3">信息管理</td>
</tr>
<tr class="child_row_02">
<td>Grayson</td>
<td>?</td>
<td>?</td>
</tr>
<tr class="child_row_02">
<td>Audrey</td>
<td>?</td>
<td>?</td>
</tr>
<tr class="child_row_02">
<td>Chloe</td>
<td>?</td>
<td>?</td>
</tr>
<tr class="parent" id="row_03">
<td colspan="3">物流管理</td>
</tr>
<tr class="child_row_03">
<td>Zoe</td>
<td>?</td>
<td>?</td>
</tr>
<tr class="child_row_03">
<td>Lucas</td>
<td>?</td>
<td>?</td>
</tr>
<tr class="child_row_03">
<td>Khloe?</td>
<td>?</td>
<td>?</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$("tr.parent").click(function(){
var child = $(this).siblings('.child_'+this.id);
console.log(child);
if($(child).is(":visible")){
$(this).removeClass("selected");
child.hide();
}else{
child.show();
$(this).addClass("selected");
}
// $(this).attr("class","parent selected");
console.log("1");
});
$("tbody>tr[class*=child]").click(function(){
$(this).addClass("td_selected")
.siblings().removeClass("td_selected")
.end();//如果下面要回到对$(this)的操作，就用end()方法结束对.siblings()的调用
});
$("tr:contains('Zoe')").css("background-color","orange");
$("#filter").keyup(function(){
var inputValue = $(this).val();
var transValue = escape(inputValue);
var firstLetter = inputValue.slice(0,1);//截取首字母
var rest = inputValue.slice(1);//截取余下部分
console.log(rest);
var queryStr;
console.log(transValue);
console.log(firstLetter);
$("table tbody tr").hide()
if(transValue.indexOf("%u") < 0){//如=-1，说明没有找到“%u”，即不是中文/编码>255的字符
var upperCase = firstLetter.toUpperCase();
console.log(upperCase);
queryStr = upperCase + rest;//将首字母转换为大写后再与剩余部分拼接，作为查询字符串
console.log(queryStr);
}else{
queryStr = inputValue;
console.log(queryStr);
};
$("table tbody tr").hide()
.filter(":contains('" + ( queryStr ) + "')").show();//字符串拼接~
});
});
</script>
</body>
</html>