I currently have an HTML table of movies and their genres that is searchable by genre by way of a search input field. I would like to alter this table so that the search is performed by way of genre-based checkboxes (Adventure, Animation, etc.) so that users can filter the table by multiple genres at a time. In order for this to work, the checkboxes need to find more than just rows that have exact matches to the box values (for example, the "Animation" box must return films with the genre "Animation/Adventure/Family" as well as just "Animation). How can I do this? Thank you for your help! :)
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sarah's Movie TYGERRSSSS - Search by Genre</title>
<link rel="stylesheet" href="Stylesheets/Search_SearchByGenre.css">
<script src="http://ift.tt/1pD5F0p"></script>
<script type="text/javascript">
function searchRows(tblId) {
var tbl = document.getElementById(tblId);
var headRow = tbl.rows[0];
var arrayOfHTxt = new Array();
var arrayOfHtxtCellIndex = new Array();
for (var v = 0; v < headRow.cells.length; v++) {
if (headRow.cells[v].getElementsByTagName('input')[0]) {
var Htxtbox = headRow.cells[v].getElementsByTagName('input')[0];
if (Htxtbox.value.replace(/^\s+|\s+$/g, '') != '') {
arrayOfHTxt.push(Htxtbox.value.replace(/^\s+|\s+$/g, ''));
arrayOfHtxtCellIndex.push(v);
}
}
}
for (var i = 1; i < tbl.rows.length; i++) {
tbl.rows[i].style.display = 'table-row';
for (var v = 0; v < arrayOfHTxt.length; v++) {
var CurCell = tbl.rows[i].cells[arrayOfHtxtCellIndex[v]];
var CurCont = CurCell.innerHTML.replace(/<[^>]+>/g, "");
var reg = new RegExp(arrayOfHTxt[v] + ".*", "i");
if (CurCont.match(reg) == null) {
tbl.rows[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<a href="TYGERRSSSS_Search.html"><img id="arrow" src="Images/ArrowOrange.PNG" /></a>
<h1>Search by Genre</h1>
<table id="tblS">
<thead>
<tr>
<th>Title</th>
<th scope="col">Genre<br><input id="txtPrjName" onkeyup="searchRows('tblS')" type="text" placeholder="Genre"/></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="Movie_101 Dalmatians.html">101 Dalmatians</a></td>
<td>Animation/Adventure/Comedy</td>
</tr>
<tr>
<td><a href="Movie_101 Dalmatians II- Patch's London Adventure.html">101 Dalmatians II: Patch's London Adventure</a></td>
<td>Animation/Family</td>
</tr>
<tr>
<td><a href="Movie_1001 Classic Commercials.html">1001 Classic Commercials</a></td>
<td>Advertisement/History</td>
</tr>
<tr>
<td><a href="Movie_2001- A Space Odyssey.html">2001: A Space Odyssey</a></td>
<td>Mystery/Sci-Fi</td>
</tr>
<tr>
<td><a href="Movie_The Addams Family.html">The Addams Family</a></td>
<td>Comedy/Fantasy</td>
</tr>
<tr>
<td><a href="Movie_Addams Family Values.html">Addams Family Values</a></td>
<td>Comedy/Fantasy</td>
</tr>
<tr>
<td><a href="Movie_Air Bud- Golden Receiver.html">Air Bud: Golden Receiver</a></td>
<td>Comedy/Family/Sports</td>
</tr>
<tr>
<td><a href="Movie_Air Bud- World Pup.html">Air Bud: World Pup</a></td>
<td>Comedy/Drama/Family</td>
</tr>
<tr>
<td><a href="Movie_Air Bud- Seventh Inning Fetch.html">Air Bud: Seventh Inning Fetch</a></td>
<td>Comedy/Drama/Family</td>
</tr>
<tr>
<td><a href="Movie_Air Bud Spikes Back.html">Air Bud Spikes Back</a></td>
<td>Comedy/Family/Sports</td>
</tr>
<tr>
<td><a href="Movie_Air Buddies.html">Air Buddies</a></td>
<td>Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Snow Buddies.html">Snow Buddies</a></td>
<td>Adventure/Family</td>
</tr>
<tr>
<td><a href="Movie_Santa Buddies- The Legend of Santa Paws.html">Santa Buddies: The Legend of Santa Paws</a></td>
<td>Adventure/Family</td>
</tr>
<tr>
<td><a href="Movie_Spooky Buddies.html">Spooky Buddies</a></td>
<td>Family/Fantasy</td>
</tr>
<tr>
<td><a href="Movie_Airplane!.html">Airplane!</a></td>
<td>Comedy</td>
</tr>
<tr>
<td><a href="Movie_Aladdin.html">Aladdin</a></td>
<td>Animation/Adventure/Comedy</td>
</tr>
<tr>
<td><a href="Movie_Alfred Hitchcock Presents - Season One.html">Alfred Hitchcock Presents<br>Season One</a></td>
<td>Crime/Drama/Mystery</td>
</tr>
<tr>
<td><a href="Movie_Alfred Hitchcock Presents - Season Two.html">Alfred Hitchcock Presents<br>Season Two</a></td>
<td>Crime/Drama/Mystery</td>
</tr>
<tr>
<td><a href="Movie_Alfred Hitchcock Presents - Season Five.html">Alfred Hitchcock Presents<br>Season Five</a></td>
<td>Crime/Drama/Mystery</td>
</tr>
<tr>
<td><a href="Movie_Alice in Cartoonland.html">Alice in Cartoonland</a></td>
<td>Animation/Adventure/Comedy</td>
</tr>
<tr>
<td><a href="Movie_Alice in Wonderland.html">Alice in Wonderland</a></td>
<td>Adventure/Family/Fantasy</td>
</tr>
<tr>
<td><a href="Movie_Aliens in the Attic.html">Aliens in the Attic</a></td>
<td>Adventure/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks.html">Alvin and the Chipmunks</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks- The Squeakquel.html">Alvin and the Chipmunks: The Squeakquel</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks- Chipwrecked.html">Alvin and the Chipmunks: Chipwrecked</a></td>
<td>Animation/Adventure/Comedy</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks- Batmunk.html">Alvin and the Chipmunks: Batmunk</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks- The Chipmunk Adventure.html">Alvin and the Chipmunks: The Chipmunk Adventure</a></td>
<td>Animation/Adventure/Comedy</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks- A Chipmunk Valentine.html">Alvin and the Chipmunks: A Chipmunk Valentine</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks- Easter Collection.html">Alvin and the Chipmunks: Easter Collection</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks- The Very First Alvin Show.html">Alvin and the Chipmunks: The Very First Alvin Show</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks Meet Frankenstein.html">Alvin and the Chipmunks Meet Frankenstein</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks Meet the Wolfman.html">Alvin and the Chipmunks Meet the Wolfman</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_Alvin and the Chipmunks Go To the Movies- Daytona Jones and the Pearl of Wisdom.html">Alvin and the Chipmunks Go To the Movies: Daytona Jones and the Pearl of Wisdom</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_ALVINNN!!! and the Chipmunks Vol 1- Alvin's Wild Adventures.html">ALVINNN!!! and the Chipmunks Vol 1: Alvin's Wild Adventures</a></td>
<td>Animation/Comedy/Family</td>
</tr>
<tr>
<td><a href="Movie_America's 60 Greatest Unsolved Mysteries & Crimes.html">America's 60 Greatest Unsolved Mysteries & Crimes</a></td>
<td>Crime/Mystery/History</td>
</tr>
</tbody>
</table>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire