GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing github.com — Filterable Table using jquery.. 🚀 · lgope/JavaScript@e8bbbea

File tree

Expand file treeCollapse file tree

Open diff view settings

Filter options

jQuery/jQuery-misc
- filer_tables.html

Expand file treeCollapse file tree

Open diff view settings

Collapse file

`‎jQuery/jQuery-misc/filer_tables.html‎`

Copy file name to clipboard

+80Lines changed: 80 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,80 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html>`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <title>Info Table</title>`
	`6`	`+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>`
	`7`	`+ <script>`
	`8`	`+ $(document).ready(function () {`
	`9`	`+ $("#myInput").on("keyup", function () {`
	`10`	`+ var value = $(this).val().toLowerCase();`
	`11`	`+ $("#myTable tr").filter(function () {`
	`12`	`+ $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)`
	`13`	`+ });`
	`14`	`+ });`
	`15`	`+ });`
	`16`	`+ </script>`
	`17`	`+ <style>`
	`18`	`+ table {`
	`19`	`+ font-family: arial, sans-serif;`
	`20`	`+ border-collapse: collapse;`
	`21`	`+ width: 100%;`
	`22`	`+ }`
	`23`	`+`
	`24`	`+ td,`
	`25`	`+ th {`
	`26`	`+ border: 1px solid #dddddd;`
	`27`	`+ text-align: left;`
	`28`	`+ padding: 8px;`
	`29`	`+ }`
	`30`	`+`
	`31`	`+ tr:nth-child(even) {`
	`32`	`+ background-color: #dddddd;`
	`33`	`+ }`
	`34`	`+ </style>`
	`35`	`+</head>`
	`36`	`+`
	`37`	`+<body>`
	`38`	`+`
	`39`	`+ <h2>Filterable Table</h2>`
	`40`	`+ <p>Type something in the input field to search the table for first names, last names or emails:</p>`
	`41`	`+ <input id="myInput" type="text" placeholder="Search..">`
	`42`	`+ <br><br>`
	`43`	`+`
	`44`	`+ <table>`
	`45`	`+ <thead>`
	`46`	`+ <tr>`
	`47`	`+ <th>Firstname</th>`
	`48`	`+ <th>Lastname</th>`
	`49`	`+ <th>Email</th>`
	`50`	`+ </tr>`
	`51`	`+ </thead>`
	`52`	`+ <tbody id="myTable">`
	`53`	`+ <tr>`
	`54`	`+ <td>Lakshman</td>`
	`55`	`+ <td>Gope</td>`
	`56`	`+ <td>[email protected]</td>`
	`57`	`+ </tr>`
	`58`	`+ <tr>`
	`59`	`+ <td>Raton</td>`
	`60`	`+ <td>Biswas</td>`
	`61`	`+ <td>[email protected]</td>`
	`62`	`+ </tr>`
	`63`	`+ <tr>`
	`64`	`+ <td>JOJO</td>`
	`65`	`+ <td>Dooley</td>`
	`66`	`+ <td>[email protected]</td>`
	`67`	`+ </tr>`
	`68`	`+ <tr>`
	`69`	`+ <td>Proddut</td>`
	`70`	`+ <td>Gope</td>`
	`71`	`+ <td>[email protected]</td>`
	`72`	`+ </tr>`
	`73`	`+ </tbody>`
	`74`	`+ </table>`
	`75`	`+`
	`76`	`+ <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>`
	`77`	`+`
	`78`	`+</body>`
	`79`	`+`
	`80`	`+</html>`

0 commit comments

Comments

0 (0)

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.