程式碼如下(暫時沒有用原生js實現):

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <script src="jquery-3.3.1.min.js"></script>
  9. <style>
  10. table{
  11. width: 224px;
  12. height: 50px;
  13. text-align: center;
  14. border-collapse: collapse;
  15. }
  16. table,td,tr,th{
  17. border: 1px solid orange;
  18. }
  19. td,th,tr,thead{
  20. box-shadow: 1px 1px 2px salmon;
  21. padding-top: 5px;
  22. padding-bottom: 5px;
  23. }
  24. tr.parent{
  25. background-color: teal;
  26. color: white;
  27. }
  28. tr.child_row_01,tr.child_row_02,tr.child_row_03{
  29. display: none;
  30. }
  31. .selected{
  32. background-color: darkorange !important;
  33. }
  34. .td_selected{
  35. background-color: salmon !important;
  36. }
  37. input{
  38. margin-bottom: 20px;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <input type="text" id="filter">
  44. <table>
  45. <thead>
  46. <tr>
  47. <th>姓名</th>
  48. <th>年齡</th>
  49. <th>年級</th>
  50. </tr>
  51. </thead>
  52. <tbody>
  53. <tr class="parent" id="row_01" >
  54. <td colspan="3">管理科學</td>
  55. </tr>
  56. <tr class="child_row_01">
  57. <td>Olivia</td>
  58. <td>?</td>
  59. <td>?</td>
  60. </tr>
  61. <tr class="child_row_01">
  62. <td>Ethan</td>
  63. <td>?</td>
  64. <td>?</td>
  65. </tr>
  66. <tr class="child_row_01">
  67. <td>Evelyn</td>
  68. <td>?</td>
  69. <td>?</td>
  70. </tr>
  71. <tr class="parent" id="row_02">
  72. <td colspan="3">資訊管理</td>
  73. </tr>
  74. <tr class="child_row_02">
  75. <td>Grayson</td>
  76. <td>?</td>
  77. <td>?</td>
  78. </tr>
  79. <tr class="child_row_02">
  80. <td>Audrey</td>
  81. <td>?</td>
  82. <td>?</td>
  83. </tr>
  84. <tr class="child_row_02">
  85. <td>Chloe</td>
  86. <td>?</td>
  87. <td>?</td>
  88. </tr>
  89. <tr class="parent" id="row_03">
  90. <td colspan="3">物流管理</td>
  91. </tr>
  92. <tr class="child_row_03">
  93. <td>Zoe</td>
  94. <td>?</td>
  95. <td>?</td>
  96. </tr>
  97. <tr class="child_row_03">
  98. <td>Lucas</td>
  99. <td>?</td>
  100. <td>?</td>
  101. </tr>
  102. <tr class="child_row_03">
  103. <td>Khloe?</td>
  104. <td>?</td>
  105. <td>?</td>
  106. </tr>
  107. </tbody>
  108. </table>
  109. <script>
  110. $(function(){
  111. $("tr.parent").click(function(){
  112. var child = $(this).siblings('.child_'+this.id);
  113. console.log(child);
  114. if($(child).is(":visible")){
  115. $(this).removeClass("selected");
  116. child.hide();
  117. }else{
  118. child.show();
  119. $(this).addClass("selected");
  120. }
  121. // $(this).attr("class","parent selected");
  122. console.log("1");
  123. });
  124. $("tbody>tr[class*=child]").click(function(){
  125. $(this).addClass("td_selected")
  126. .siblings().removeClass("td_selected")
  127. .end();//如果下面要回到對$(this)的操作,就用end()方法結束對.siblings()的呼叫
  128. });
  129. $("tr:contains('Zoe')").css("background-color","orange");
  130. $("#filter").keyup(function(){
  131. var inputValue = $(this).val();
  132. var transValue = escape(inputValue);
  133. var firstLetter = inputValue.slice(0,1);//擷取首字母
  134. var rest = inputValue.slice(1);//擷取餘下部分
  135. console.log(rest);
  136. var queryStr;
  137. console.log(transValue);
  138. console.log(firstLetter);
  139. $("table tbody tr").hide()
  140. if(transValue.indexOf("%u") < 0){//如=-1,說明沒有找到“%u”,即不是中文/編碼>255的字元
  141. var upperCase = firstLetter.toUpperCase();
  142. console.log(upperCase);
  143. queryStr = upperCase + rest;//將首字母轉換為大寫後再與剩餘部分拼接,作為查詢字串
  144. console.log(queryStr);
  145. }else{
  146. queryStr = inputValue;
  147. console.log(queryStr);
  148. };
  149. $("table tbody tr").hide()
  150. .filter(":contains('" + ( queryStr ) + "')").show();//字串拼接~
  151. });
  152. });
  153. </script>
  154. </body>
  155. </html>