<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: red; } table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} th { background-color: #4CAF50; color: white; } </style> </head> <body> <h2 style="text-align:center;">Student List</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <th><font color="red">Name</font></th> <th><font color="red">Contact</font></th> <th><font color="red">Institute</font></th> <tr> <td>Masud</td> <td>01717347485</td> <td>Gaibandha govt boys</td> </tr> <tr> <td>Subrato Ray</td> <td>01726992110</td> <td>Sundargonj govt boys</td> </tr> <tr> <td>Sagor Mia</td> <td>01773905216</td> <td>Sundargonj govt boys</td> </tr> <tr> <td>Kalu Da</td> <td>017.........</td> <td>Sundargonj govt boys</td> </tr> <tr> <td>Hossian Mia</td> <td>019.........</td> <td>Sundargonj govt boys</td> </tr> <tr> <td>Jabed Ali</td> <td>018..........</td> <td>Sundargonj govt boys</td> </tr> <tr> <td>Kolil Ali</td> <td>016..........</td> <td>Bamondanga govt boys</td> </tr> <tr> <td>Ms Dhoni</td> <td>016..........</td> <td>Bamondanga govt boys</td> </tr> </table> <script> function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); 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"; } } } } </script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more