Hi,
I am having a problem. I have a HTML table on my webpage but I am having trouble searching it from my main homepage using a HTML form.
The html form on the homepage is:
I have a search working fine on the html page and javascript functions conducting the search as shown here:Code:<html> <body> <form method="post" action="http://www.example.com/sites/default/files/html_table.html" <input type="text" size="30" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" /> <input type="submit" value="Search" onclick="tableSearch.runSearch();" /> </body> </html>
If anybody could help me please! I have run out of ideasCode:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>JavaScript Search</title> <style type="text/css"> body { font-family: Arial; font-size: 11px; } td { font-family: Arial; font-size: 11px; } th { font-family: Arial; font-size: 11px; background-color: #c8c8c8; } input { font-family: Arial; font-size: 11px; } </style> <script language="javascript" type="text/javascript"> //define the table search as an object, which can implement both functions and properties window.tableSearch = {}; //initialize the search, setup the current object tableSearch.init = function() { //define the properties I want on the tableSearch object this.Rows = document.getElementById('data').getElementsByTagName('TR'); this.RowsLength = tableSearch.Rows.length; this.RowsText = []; //loop through the table and add the data to for (var i = 0; i < tableSearch.RowsLength; i++) { this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase(); } } //onlys shows the relevant rows as determined by the search string tableSearch.runSearch = function() { //get the search term this.Term = document.getElementById('textBoxSearch').value.toUpperCase(); //loop through the rows and hide rows that do not match the search query for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) { row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none'; } } //runs the search tableSearch.search = function(e) { //checks if the user pressed the enter key, and if they did then run the search var keycode; if (window.event) { keycode = window.event.keyCode; } else if (e) { keycode = e.which; } else { return false; } if (keycode == 13) { tableSearch.runSearch(); } else { return false; } } </script> </head> <body onload="tableSearch.init();"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <input type="text" size="30" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" /> <input type="button" value="Search" onclick="tableSearch.runSearch();" /> </td> </tr> </tbody> </table> <br /> <table border="1" cellpadding="2" cellspacing="0"> <tr> <th>ID</th> <th>First Name</th> <th>Surname</th> <th>Website</th> </tr> <tbody id="data"> <tr> <td>1</td> <td>Heathesh</td> <td>Bhandari</td> <td><a href="http://heathesh.com">http://heathesh.com</a></td> </tr> <tr> <td>2</td> <td>Candice</td> <td>David</td> <td><a href="http://candicedavid.com">http://candicedavid.com</a></td> </tr> </tbody> </table> </body> </html>
Reply With Quote
Bookmarks