Tạo bảng với nút tìm kiếm dữ liệu / How to - Filter/Search Table

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<th style="width:40%;">Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Germany</td>

</tr>

<tr>

<td>Berglunds snabbkop</td>

<td>Sweden</td>

</tr>

<tr>

<td>Island Trading</td>

</tr>

<tr>

<td>Koniglich Essen</td>

<td>Germany</td>

</tr>

</table>

#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

#myInput {

background-image: url('/css/searchicon.png'); /* Add a search icon to input */

background-position: 10px 12px; /* Position the search icon */

background-repeat: no-repeat; /* Do not repeat the icon image */

width: 100%; /* Full-width */

font-size: 16px; /* Increase font-size */

padding: 12px 20px 12px 40px; /* Add some padding */

border: 1px solid #ddd; /* Add a grey border */

margin-bottom: 12px; /* Add some space below the input */

}

#myTable {

border-collapse: collapse; /* Collapse borders */

width: 100%; /* Full-width */

border: 1px solid #ddd; /* Add a grey border */

font-size: 18px; /* Increase font-size */

}

#myTable th, #myTable td {

text-align: left; /* Left-align text */

padding: 12px; /* Add padding */

}

#myTable tr {

/* Add a bottom border to all table rows */

border-bottom: 1px solid #ddd;

}

#myTable tr.header, #myTable tr:hover {

/* Add a grey background color to the table header and on hover */

background-color: #f1f1f1;

}

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function myFunction() {

// Declare variables

var input, filter, table, tr, td, i, txtValue;

input = document.getElementById("myInput");

filter = input.value.toUpperCase();

table = document.getElementById("myTable");

tr = table.getElementsByTagName("tr");

// Loop through all table rows, and hide those who don't match the search query

for (i = 0; i < tr.length; i++) {

td = tr[i].getElementsByTagName("td")[0];

if (td) {

txtValue = td.textContent || td.innerText;

if (txtValue.toUpperCase().indexOf(filter) > -1) {

tr[i].style.display = "";

} else {

tr[i].style.display = "none";

}

code, CSS

Tạo bảng với nút tìm kiếm dữ liệu / How to – Filter/Search Table

HTML

CSS

JS

DEMO

Bài viết cùng chủ đề:

CodePen Home Textarea Tabs + Syntax Highlighting

Count Up Number trên themes Flatsome như thế nào?

Nội dung mặt định file .htaccess trong WordPress

Css hiệu ứng chữ nhấp nháy – blinking/flashing text with CSS 3

Tạo nút Read More / Read Less (Xem thêm / Ẩn nội dung) cho nội dung quá dài trong wordpress

Css thường dùng, cách tùy biến contact form 7

Tạo menu riêng cho từng trang Flatsome

14 kiểu html css title đẹp cho website của bạn thêm chuyên nghiệp

Aiken Trung

Name	Country
Alfreds Futterkiste	Germany
Berglunds snabbkop	Sweden
Island Trading	UK
Koniglich Essen	Germany