With Safari, you learn the way you learn best. Get unlimited access to videos, live online training,
learning paths, books, tutorials, and more.

Creating a widget to search data in a table

The searchable widget will insert a new row at the beginning of the table element. Inside this row, there will be a td element that will have a label and a textbox for searching.

For the markup on the HTML page, we will only need a table with some rows.

Writing markup for the table

The entire markup will be written inside the search.html file. We will create a table with three columns. The first column will be the serial number, the second column will be the name of a place, and the third column will have comma-separated tags related to that place. To create such a table, open the search.html file and write the following code to create a regular HTML table:

<html> <head> <title>Searchable Widget</title> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training,
learning paths, books, interactive tutorials, and more.