程式碼如下(暫時沒有用原生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>