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 Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Text Search HTML

Status
Not open for further replies.
sanders720

sanders720

Programmer
Aug 2, 2001
421
US
I have an HTML document with a table. I would like to search the table for a keyword using wildcards, and have it either move to the next criteria in the table, or isolate the rows of the table based on the selection criteria.

Search

Gear – would find Gearboxes in the second row as the first item, and move to the word GEAR accordingly – with some kind of next function to pan through the document. The problem is, how would I always have my search string box on top?

OR – Isolate the rows that contain GEAR in column 1 or 2, thus temporarily hiding the rows that do not have this information.


Table:

Company Product Description

1234 Corp Air Cylinders, Proximity Switches and Accessories
5678 Corp Motors and Gearboxes
7890 Corp Conveyors and Belts

Any ideas would be greatly appreciated.



 
Sort by date Sort by votes
Something like this (untested):
Code: 
<html>
<head>
<title>Searchable Table</title>
<script type="text/javascript">
<!--

function searchTable(txt)
{
  var re = "/\b" + txt + "/i"; // a word break and then the text
  var tbl = document.getElementById('tbl_to_search');
  var rs = tbl.rows;
  for (var i=0; i<rs.length; i++)
    rs.style.display = (rs[i].innerHTML.match(re)) ? "block" : "none";
}

// -->
</head>
<body>
<form>
 <input type="text" name="srch">
 <input type="button" value="Search!" onclick="searchTable(this.form.elements['srch'].value);">
</form>
<br>
<table id="tbl_to_search">
 <!-- ...... -->
</table>
</body>
</html>

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Upvote 0 Downvote
*****
Change
Code: 
  var rs = tbl.rows;
to
Code: 
  var rs = tbl.[red]childNodes[/red];

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Upvote 0 Downvote
Thanks for your reply

In my attempt to do what you've done, I get an "error on page" notice at the lower-left screen.

Would appreciate any added help that could be provided.


Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<title>How To Use This Handbook</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
.hardcopy {color: #CC0000}
-->
</style>

<title>Searchable Table</title>

<script type="text/javascript">
<!--

function searchTable(txt)
{
var re = "/\b" + txt + "/i"; // a word break and then text
var tbl = document.getElementById('tbl_to_search');
var rs=tbl.childNodes;
for (var i=0; i<rs.length; i++)
rs.style.display = (rs.innerHTML.match(re)) ? "block" : "none";
}

// -->
</script>

</head>

<body>
<p><strong>Vendor Hyperlinks</strong></p>
<p><strong></strong></p>
<p><strong>Scope: </strong></p>
<p>Metro Library Links. </p>
<p><strong>Purpose: </strong></p>
<p>To document which parts are purchased from which vendors, and reference their corresponding website address. </p>
<p><strong>Introduction: </strong></p>
<p>The Metro Library is basically a catalog of parts organized by manufacturer. These pages are an effort to reduce paperwork and keep information current. Items not available for internet access will be noted &quot;<span class="hardcopy">SEE HARDCOPY REFERENCE</span>.&quot; </p>
<p><strong>Description:</strong></p>

<form>
<input type="text" name="srch">
<input type="button" value="Search!" onclick="SearchTable(this.form.elements ['srch'].value);">
</form>
<br>
<table id="tab_to_search">
<!-- ...... --->

<table width="1024" border="1">
<tr>
<th width="360" scope="col">Vendor Reference</th>
<th width="646" scope="col">Product</th>
</tr>
<tr>
<td><a href = " class="MenuItem">AGI Automation Components </a></td>
<td><a href = " class="MenuItem"> Grippers</a>, <a href = " class="MenuItem">Rotary Actuators</a>, <a href = " class="MenuItem">Powered Slides</a>, <a href = " class="MenuItem">Mini Power Slides</a>, <a href = " class="MenuItem">Feed Escapement</a>, <a href = " class="MenuItem">Hand Exchange</a> and <a href = " class="MenuItem">Load Limiters</a>.</td>
</tr>
<tr>
<td><a href = " class="MenuItem">ALCOA UltrAlloy 6020 </a></td>
<td>Lead Free Aluminum Product.</td>
</tr>
.
.
.
.
</table>
<p>&nbsp;</p>
</body>
</html>
 
Upvote 0 Downvote
double-click that "error on page" message and let us know the actual error message.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
Line 47
Char 1
Error Object Expected
Code 0
URL file>//P:\_FILES\Engineering Library\Metry X.Y - VendorHyperlinks.htm

Line 47:

<input type="button" value="Search!" onclick="SearchTable(this.form.elements ['srch'].value);">

 
Upvote 0 Downvote
get rid of that space.

Code: 
<input ... onclick="SearchTable(this.form.elements ['srch'].value);">
                                                  ^ delete this space

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
Same problem

What is the page supposed to do on this code?

Thanks!
 
Upvote 0 Downvote
1) your capitalization isn't the same. You define the function as "searchTable" and then call it as "Search Table".

2) you're looking for a table with id of "tbl_to_search", yet your table has an id of "tab_to_search".

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
I do appreciate your help!

rs.style.display = (rs.innerHTML.match(re)) ? "block" : "none";

is now producing this:

Line: 25
Char: 5
Error: 'style' is null or not an object
Code: 0
URL: file://P:\_FILES\EngineeringLibrary\MetroX.Y - VendorHyperlinks.htm
 
Upvote 0 Downvote
'cause it should be:

Code: 
rs[i].style.display = (rs[i].innerHTML.match(re)) ? "block" : "none";

chessbot was a real comedian on this one :)

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
No errors, but what is this code supposed to do? Move to the next item and highlight it, or highlight everything that meets the criteria, or just show the rows in the table (thus rebuilding it) that meets the criteria?

Forgive my ignorance, I've never done anything in Javascript before.
 
Upvote 0 Downvote
from what i can tell, it will show/hide the table rows based on whether or not the text inside each [tt]<tr>[/tt] tag meets the criteria in the regular expression.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
Do I need to do anything to the <tr> lines of code, because right now it does nothing.

A few rows look like this

<table width="1024" border="1">
<tr>
<th width="360" scope="col">Vendor Reference</th>
<th width="646" scope="col">Product</th>
</tr>
<tr>
<td><a href = " class="MenuItem">AGI Automation Components </a></td>
<td><a href = " class="MenuItem"> Grippers</a>, <a href = " class="MenuItem">Rotary Actuators</a>, <a href = " class="MenuItem">Powered Slides</a>, <a href = " class="MenuItem">Mini Power Slides</a>, <a href = " class="MenuItem">Feed Escapement</a>, <a href = " class="MenuItem">Hand Exchange</a> and <a href = " class="MenuItem">Load Limiters</a>.</td>
</tr>
<tr>
<td><a href = " class="MenuItem">ALCOA UltrAlloy 6020 </a></td>
<td>Lead Free Aluminum Product.</td>
</tr>
<tr>
<td><a href = " class="MenuItem">AMC - Automation & Modular Components, Inc. </a></td>
<td>Modular Conveyor Systems, Modu-Con Systems, Flex-Con Systems, Quick Connect. </td>
</tr>
<tr>
<td><a href = " class="MenuItem">ASCO Solenoid Valves </a></td>
<td>2, 3 and 4 way Solenoid Valves.</td>
</tr>
<tr>
<td><a href = " class="MenuItem">Accurate (ASM) Screw Machine Corp. </a></td>
<td>Electronic Component Hardware.</td>
</tr>
<tr>
<td><a href = " class="MenuItem">Advanced Seals</a></td>
<td>Seals for Extreme Environments - Acquired by Parker on 12/01/2004 - also <span class="hardcopy">SEE HARDCOPY REFERENCE</span> in Metro Library.</td>
</tr>
<tr>
<td><a href = " class="MenuItem">Aerotech</a></td>
<td>Motion Systems - Positioning Systems Catalog.</td>
</tr>
<tr>
<td><a href = " class="MenuItem">Airprel</a></td>
<td>Anti-Stiction Air Cylinders - also <span class="hardcopy">SEE HARDCOPY REFERENCE</span> in Metro Library. Airprel is a product line of <a href = " class="MenuItem">Olheiser Corporation</a></td>
</tr>
<tr>
<td><a href = " class="MenuItem">Airtrol</a></td>
<td>Precision Miniature Pneumatic Components: <a href = " class="MenuItem"></a>Pressure and Vacuum Switches, Pressure Regulators, Vacuum Regulators, Relief Valves &amp; Comparators, SDU-5000 Series Stepper Motor Driven Regulators, Precision Orifices and Accessories.</td>
</tr>
 
Upvote 0 Downvote
Since I don't know regexp's, I would do something different, like this:

Code: 
function searchTable(txt) {

    // get table element
    var tbl = document.getElementById('tbl_to_search');

    // get the table's child elements
    var rs = tbl.childNodes;

    // variable to hold each child
    var e;

    // loop through each child
    for( var i=0; i<rs.length; i++) {

        // get the current child
        e = rs[i];

        // if txt exists in the child, display the child
        // otherwise, hide the child
        e.style.display = (e.innerHTML.indexOf(txt) > -1) ? "block" : "none";
    }
}

Of course, I'm not entirely sure what your desired functionality is, but hopefully that will help.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
I did this, but the code still does nothing, but no errors. Could it have anything to do with Drearweaver?

Thanks again for all the help!
 
Upvote 0 Downvote
Any other thoughts on this? I must need to do something else to get the javascript code tgo do something!

Thanks
 
Upvote 0 Downvote
Moved to top - if anyone has an answer for this it would be greatly appreciated!
 
Upvote 0 Downvote
The table you are searching must have the id "tbl_to_search".
Code: 
<table width="1024" border="1" [red]id="tbl_to_search"[/red]>

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Upvote 0 Downvote
Thanks for your reply. When I changed the tabel id, I now get this error:

Error: Style is null or not an object on this line

e.style.display = (e.innerHTML.indexOf(txt) > -1) ? "block" : "none";

entire function:

function searchTable(txt)
{
// get table element
var tbl = document.getElementById('tbl_to_search');

// get the table's child elements
var rs=tbl.childNodes;

// variable to hold each child
var e;

// loop through each child
for (var i=0; i<rs.length; i++)
{
// get the current child
e = rs[1];

// if txt exists in the child, display the child
// otherwise, hide the child
e.style.display = (e.innerHTML.indexOf(txt) > -1) ? "block" : "none";
}
}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
860
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
983
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
872
malpa
malpa
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
719
Rayj0000
Rayj0000
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
364
Samthyr
Samthyr

Part and Inventory Search

Sponsor

Back
Top