Adding Search bar to HTML Table

  • Thread starter Grayfox
  • 4 comments
  • 932 views
Grayfox

Grayfox

11,677
Australia
Australia
I_Grayson_Fox_I
I want to add a dynamic search filter that only searches the "Title" section to a HTML table I am making so I can find the what movies I have faster
Would also like to add filters to Genre and Ratings as well.
I have been looking at W3 for help but I cant find the section for adding search boxes.

But I don't know how to go about it

This is my code so far.
Code: 
<html>
<body>
<h1>Movie Database</h1>
<table id="Movies" height="30">
  <tr>
    <th width="375" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Title</font></th>
    <th width="55" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Format</font></th>
    <th width="60" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Rating</font></th>
    <th width="60" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Length</font></th>
    <th width="300" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Genre</font></th>
    <th width="50" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Year</font></th>
    <th width="60" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Region</font></th>
    <th width="90" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Multi Disc</font></th>
    <th width="75" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Box Set</font></th>
    <th width="325" height="30" style="text-align: center"><font face="Arial" style="font-size: 13pt">Ripped Location</font></th>
  </tr>
  <tr>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  <td height="30" style="text-align: center"></td>
  </tr> 
</table>
</body>
</html>
 
Last edited:
After I add the movies into the list, I will have to figure out how to add a data entry field which will create a HTML table line and add the data in the correct sections
 

Latest Posts

Back