Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript Search 1

Status
Not open for further replies.
Nebooaw

Nebooaw

Programmer
Joined
Jun 1, 2001
Messages
142
Location
GB
Hi i have a web page with 50 tables on it each table has a unique id like 200, 201, 202 etc…

I want a text field on the web page which I can enter a number into, as I type in the number tables which their id doesnot match disapears only leaving tables that match. Is this possible?

Kindest thanks.
 
Sort by date Sort by votes
My example:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language="javascript">
<!--

function hideTables() {
    var list = document.forms['the_form'].elements['the_text'].value;
	var tables = list.split(",");

	var elems = document.getElementsByTagName('table');
    var inArray = false;

	for (var i = 0; i < elems.length; i++) {
        for (y = 0; y < tables.length; y++) {
            if (elems[i].id == 'table' + tables[y])
			    inArray = true;
		}
        if (!inArray)
		    elems[i].style.display = 'none';
		else
			elems[i].style.display = '';
		inArray = false;
	}
}

-->
</script>

</HEAD>

<BODY>

<form name='the_form'>
<input type="text" name="the_text">
<input type="button" value="hide tables" onclick="hideTables();">
</form>

<table id="table1"><tr>
<td>this is table 1</td>
</tr></table>

<table id="table2"><tr>
<td>this is table 2</td>
</tr></table>

<table id="table3"><tr>
<td>this is table 3</td>
</tr></table>

<table id="table4"><tr>
<td>this is table 4</td>
</tr></table>

<table id="table5"><tr>
<td>this is table 5</td>
</tr></table>

<table id="table6"><tr>
<td>this is table 6</td>
</tr></table>


</BODY>
</HTML>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote

(enter the table numbers in the text box, separated by a comma).

1,3,5

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Thanks for replying, it works! How would i exclude tables in the document that i dont want filtering?

Regards.
 
Upvote 0 Downvote
Or could it only hide tables which the table id starts with 'problem' or somthing, leaving the other tables alone?

Kindest thanks.
 
Upvote 0 Downvote
Something like this. You may want to change the naming conventions. That's up to you.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language="javascript">
<!--

function hideTables() {
    var list = document.forms['the_form'].elements['the_text'].value;
    var tables = list.split(",");

    var elems = document.getElementsByTagName('table');
    var inArray = false;

    for (var i = 0; i < elems.length; i++) {
	    if (elems[i].id.indexOf('problem') > -1) {
	        for (y = 0; y < tables.length; y++) {
		        if (elems[i].id == 'problem' + tables[y])
			        inArray = true;
			}
			if (!inArray)
			    elems[i].style.display = 'none';
			else
			    elems[i].style.display = '';
			inArray = false;
		}
    }
}

-->
</script>

</HEAD>

<BODY>

<form name='the_form'>
<input type="text" name="the_text">
<input type="button" value="hide tables" onclick="hideTables();">
</form>

<table id="problem1"><tr>
<td>this is table 1</td>
</tr></table>

<table id="problem2"><tr>
<td>this is table 2</td>
</tr></table>

<table id="problem3"><tr>
<td>this is table 3</td>
</tr></table>

<table id="problem4"><tr>
<td>this is table 4</td>
</tr></table>

<table id="problem5"><tr>
<td>this is table 5</td>
</tr></table>

<table id="problem6"><tr>
<td>this is table 6</td>
</tr></table>

<table id="nohide1"><tr>
<td>don't hide this table</td>
</tr></table>

<table id="nohide2"><tr>
<td>don't hide this table</td>
</tr></table>


</BODY>
</HTML>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Perfect ! works like a dream! how easy would it be to modify so i i typed in '123' it would return...

123
1231
1234
1245

(would filter by like value instead of exact)

sorry for being a pain!
 
Upvote 0 Downvote
One more time:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language="javascript">
<!--

function hideTables() {
    var list = document.forms['the_form'].elements['the_text'].value;
    var tables = list.split(",");

    var elems = document.getElementsByTagName('table');
    var inArray = false;

    for (var i = 0; i < elems.length; i++) {
	    if (elems[i].id.indexOf('problem') > -1) {
	        for (y = 0; y < tables.length; y++) {
		        if (elems[i].id.indexOf('problem' + tables[y]) > -1)
			        inArray = true;
			}
			if (!inArray)
			    elems[i].style.display = 'none';
			else
			    elems[i].style.display = '';
			inArray = false;
		}
    }
}

-->
</script>

</HEAD>

<BODY>

<form name='the_form'>
<input type="text" name="the_text">
<input type="button" value="hide tables" onclick="hideTables();">
</form>

<table id="problem123456"><tr>
<td>this is table 1</td>
</tr></table>

<table id="problem123457"><tr>
<td>this is table 2</td>
</tr></table>

<table id="problem123458"><tr>
<td>this is table 3</td>
</tr></table>

<table id="problem123459"><tr>
<td>this is table 4</td>
</tr></table>

<table id="problem123460"><tr>
<td>this is table 5</td>
</tr></table>

<table id="problem123461"><tr>
<td>this is table 6</td>
</tr></table>

<table id="nohide1"><tr>
<td>don't hide this table</td>
</tr></table>

<table id="nohide2"><tr>
<td>don't hide this table</td>
</tr></table>


</BODY>
</HTML>

If you enter '12345' you'll see it in effect.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Perfect! Your worth a star, thanks for your example.
Kindest thanks.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question Question
Javascript events
Replies
1
Views
612
Daniel K
Daniel K
Marclem
  • Locked
  • Question Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
619
Marclem
Marclem
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
941
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top