उदाहरण
JavaScript का उपयोग करके एक फिल्टर टेबल बनाने के लिए, निम्न कोड देखें:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } .searchField { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } .birthDayTable { border-collapse: collapse; width: 100%; font-size: 18px; } .birthDayTable th, .birthDayTable td { text-align: left; padding: 12px; } .birthDayTable tr { border-bottom: 4px solid #ddd; } .birthDayTable tr.header, .birthDayTable tr:hover { background-color: #f1f1f1; } </style> </head> <body> <h1>फिल्टर टेबल उदाहरण</h1> <input type="text" class="searchField" placeholder="मित्र का नाम:" /> <table class="birthDayTable"> <tr class="header"> <th style="width:60%;">मित्र</th> <th style="width:40%;">जन्मदिन महीना</th> </tr> <tr> <td>शॉन</td> <td>जनवरी</td> </tr> <tr> <td>रॉन</td> <td>मार्च</td> </tr> <tr> <td>जैक</td> <td>दिसंबर</td> </tr> <tr> <td>साइमन</td> <td>फरवरी</td> </tr> <tr> <td>रिकी</td> <td>नवंबर</td> </tr> </table> <script> document .querySelector(".searchField") .addEventListener("keyup", searchFunction); function searchFunction() { var input, filter, table, tr, td, i, txtValue; input = document.querySelector(".searchField"); filter = input.value.toUpperCase(); table = document.querySelector(".birthDayTable"); 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>
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:
सर्च फ़ील्ड में कुछ टाइप करने पर:
