omanca
asked on
Search: display results & hide the rest
Hello,
I've used this code for other purposes and it works just fine.
I need a modificcation on this code so it does the following:
1. when text is searched and found, the program should hide all the rows that do not contain that word
example:
when searching for the word: "computer"
I should get only: a. computer science & b. computer engineering
2. (optional) Let search be done in the second column (major) only instead of the whole table.
<html>
<head>
<style type="text/css">
h3.one
{
visibility:visible
}
h5.two
{
visibility:visible
}
</style>
<script language="Javascript">
var IE4 = (document.all);
var win = top
var n = 0;
function search(str)
{
var txt, i, found;
if( str == "" )
return false;
if (IE4)
{
txt = win.document.body.createTe xtRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++)
{
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if (found)
{
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else
{
if (n > 0)
{
n = 0;
alert(str + " File exists.");
}
else
alert(str + " was not found on this page.");
}
}
}
</script>
</head>
<body>
<h3 class="one">
<form name="myForm">
<input type="text" name="query">
<input type="button" value="search" onclick="search(this.form. query.valu e);">
</form>
</h3>
<h5 class="two">
<table border size=1>
<tr> <td>univ.</td> <td>major</td> <td>%</td> <td>ann. cost</td></tr>
<tr> <td>UCLA</td> <td>computer science</td> <td>70</td> <td>1000</td></tr>
<tr> <td>OSU</td> <td>civil engineering</td> <td>60</td> <td>2000</td></tr>
<tr> <td>FAU</td> <td>computer engineering</td> <td>75</td> <td>3000</td></tr>
<tr> <td>FAU</td> <td>IT</td> <td>75</td> <td>3000</td></tr>
<tr> <td>FAU</td> <td>IS</td> <td>75</td> <td>3000</td></tr>
</table>
</h5>
</body>
</html>
I've used this code for other purposes and it works just fine.
I need a modificcation on this code so it does the following:
1. when text is searched and found, the program should hide all the rows that do not contain that word
example:
when searching for the word: "computer"
I should get only: a. computer science & b. computer engineering
2. (optional) Let search be done in the second column (major) only instead of the whole table.
<html>
<head>
<style type="text/css">
h3.one
{
visibility:visible
}
h5.two
{
visibility:visible
}
</style>
<script language="Javascript">
var IE4 = (document.all);
var win = top
var n = 0;
function search(str)
{
var txt, i, found;
if( str == "" )
return false;
if (IE4)
{
txt = win.document.body.createTe
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++)
{
txt.moveStart("character",
txt.moveEnd("textedit");
}
if (found)
{
txt.moveStart("character",
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else
{
if (n > 0)
{
n = 0;
alert(str + " File exists.");
}
else
alert(str + " was not found on this page.");
}
}
}
</script>
</head>
<body>
<h3 class="one">
<form name="myForm">
<input type="text" name="query">
<input type="button" value="search" onclick="search(this.form.
</form>
</h3>
<h5 class="two">
<table border size=1>
<tr> <td>univ.</td> <td>major</td> <td>%</td> <td>ann. cost</td></tr>
<tr> <td>UCLA</td> <td>computer science</td> <td>70</td> <td>1000</td></tr>
<tr> <td>OSU</td> <td>civil engineering</td> <td>60</td> <td>2000</td></tr>
<tr> <td>FAU</td> <td>computer engineering</td> <td>75</td> <td>3000</td></tr>
<tr> <td>FAU</td> <td>IT</td> <td>75</td> <td>3000</td></tr>
<tr> <td>FAU</td> <td>IS</td> <td>75</td> <td>3000</td></tr>
</table>
</h5>
</body>
</html>
PS: You cannot wrap a table or a form in a header tag
ASKER
Thanks for this quick answer mplungjan,
but the table I'll by doing is much bigger than the one I put in this example, and it wouldn't really look good.
I saw your other comment about not being able to wrap the table, but this is ncessary for it to be a successful peace of software
but the table I'll by doing is much bigger than the one I put in this example, and it wouldn't really look good.
I saw your other comment about not being able to wrap the table, but this is ncessary for it to be a successful peace of software
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Brilliant
Many many thanks
Many many thanks
<html>
<head>
<style type="text/css">
h3.one
{
visibility:visible
}
h5.two
{
visibility:visible
}
</style>
<script language="Javascript">
function showRes(str) {
var tb = document.getElementById('t
str = str.toLowerCase();
for (i=0;i<tb.rows.length; i++) {
if (tb.rows[i].cells[1].class
tb.rows[i].style.visibilit
}
}
}
</script>
</head>
<body>
<form name="myForm">
<input type="text" name="query" onKeyUp="showRes(this.valu
</form>
<table border size=1 id="t1">
<tr> <td>univ.</td> <td >major</td> <td>%</td> <td>ann. cost</td></tr>
<tr> <td>UCLA</td> <td class="searchable">compute
<tr> <td>OSU</td> <td class="searchable">civil engineering</td> <td>60</td> <td>2000</td></tr>
<tr> <td>FAU</td> <td class="searchable">compute
<tr> <td>FAU</td> <td class="searchable">IT</td>
<tr> <td>FAU</td> <td class="searchable">IS</td>
</table>
</body>
</html>