Hướng dẫn tạo Filter table với Javascript - Demo RUN
​x
 
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <style>
6
          * {
7
            box-sizing: border-box;
8
          }
9
          .container {
10
            width: 500px;
11
            margin: auto;
12
          }
13
​
14
          #myInput {
15
            background-position: 10px 12px;
16
            background-repeat: no-repeat;
17
            width: 100%;
18
            font-size: 16px;
19
            padding: 15px;
20
            border: 1px solid #ddd;
21
            margin-bottom: 12px;
22
          }
23
​
24
          #myTable {
25
            display: none;
26
            border-collapse: collapse;
27
            width: 100%;
28
            border: 1px solid #ddd;
29
            font-size: 18px;
30
          }
31
​
32
          #myTable th, #myTable td {
33
            text-align: left;
34
            padding: 12px;
35
          }
36
​
37
          #myTable tr {
38
            border-bottom: 1px solid #ddd;
39
          }
40
​
41
          #myTable tr.header, #myTable tr:hover {
42
            background-color: #f1f1f1;
43
          }
44
        </style>
45
    </head>
46
    <body>
47
      <div class="container">
48
        <h2>Freetuts.net hướng dẫn tạo Filter Table</h2>
49
​
50
        <input type="text" id="myInput" placeholder="Search for Club.." title="Type in a name of Club">
51
​
52
        <table id="myTable">
53
          <tr class="header">
54
            <th style="width:60%;">Club</th>
55
            <th style="width:40%;">Country</th>
56
          </tr>
57
          <tr>
58
            <td>Arsenal</td>
59
            <td>England</td>
60
          </tr>
61
          <tr>
62
            <td>Atletico Madrid</td>
63
            <td>Spain</td>
64
          </tr>
65
          <tr>
66
            <td>Barcelona</td>
67
            <td>Spain</td>
68
          </tr>
69
          <tr>
70
            <td>Liverpool</td>
71
            <td>England</td>
72
          </tr>
73
          <tr>
74
            <td>Real Madrid</td>
75
            <td>Spain</td>
76
          </tr>
77
          <tr>
78
            <td>Bayern Munich</td>
79
            <td>Germany</td>
80
          </tr>
81
          <tr>
82
            <td>Borussia Dortmund</td>
83
            <td>Germany</td>
84
          </tr>
85
          <tr>
86
            <td>Paris Saint-Germain</td>
87
            <td>France</td>
88
          </tr>
89
          <tr>
90
            <td>Manchester United</td>
91
            <td>England</td>
92
          </tr>
93
          <tr>
94
            <td>Monaco</td>
95
            <td>France</td>
96
          </tr>
97
        </table>
98
      </div>
99
    </body>
100
    <script>
101
      // lấy thẻ input
102
      var input = document.getElementById("myInput");
103
      // định nghĩa hàm xử lý myFunction
104
      function myFunction() {
105
        var filter, table, tr, td, i;
106
        // lấy giá trị người dùng nhập
107
        filter = input.value.toUpperCase();
108
​
109
        // lấy phần bảng hiển thị kết quả
110
        table = document.getElementById("myTable");
111
        // lấy tất cả các thẻ tr
112
        tr = table.getElementsByTagName("tr");
113
​
114
        //Nếu filter không có giá trị ẩn các kết quả
115
        if (!filter) {
116
          table.style.display = "none";
117
        }else{
118
          // lặp qua tất cả các thẻ tr
119
          for (i = 0; i < tr.length; i++) {
120
            // lấy giá trị của thẻ td đầu tiên đại diện cho tên club
121
            td = tr[i].getElementsByTagName("td")[0];
122
            if (td) {
123
              // kiểm tra giá trị filter có tồn tại trong thẻ tr không
124
              if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
125
                //nếu có hiển thị chúng
126
                table.style.display = "table";
127
                tr[i].style.display = "";
128
              } else {
129
                // nếu không ẩn chúng
130
                tr[i].style.display = "none";
131
              }
132
            }
133
          }
134
        }
135
      }
136
      //gán sự kiện cho thẻ input
137
      input.addEventListener("keyup", myFunction);
138
    </script>
139
</html>
PHÓNG TO