Find table row based on info in first cell of each row.

[rliles]

Hi...
I have a rather long table and need a feature where the user can enter search data, click a button and position the table so the found data is displayed. The first column of my table has unique data for each row so a "find next" feature is not necessary. This is similar to the brower "find in Page" feature with the exception that I would like to ONLY check the first column of the table for the data the user is interested in finding. "Find in Page" will find the data regardless of the table column. Anyone know how to make this work???

[khalidali63]

I am sure there are more ways of getting this done,
Here ist he one that I'd use.

get the column by id(column must have an id attribute set)
var col= document.getElementById("col1");

var val = col.innerHTML;

the above will give you the text in that particular column and youcan compare it with the user input
if(document.formName.textField.value.indexOf("val")>-1 then its a partial or complete match

hope this helps

Cheers

Khalid

[khalidali63]

What have you done here Dave?.
its a shame, and utmost ignorance on your part to judge me, on the other hand do the same crap of which you accused me of.

http://forums.webdeveloper.com/showthread.php?s=&threadid=5980

This is unbelieveable.

Now even I am ashamed of being responsive to your threads, I am ashamed that I even thought of you as a gentleman in the very beginning.(3 months ago)


Khalid

[rliles]

Thanks Gentlemen...

Dave...With my very limited knowledge of JS I was able to modify your script and much to my amazements my modification worked. If I can impose again:

and position the table so the found data is displayed.

I need a routine in the found string part to move the focus to the row of the table where the data was found. For example if the found data is toward the bottom of the table and out of view I need that part of the table to scroll into view.

I have include my test file. I use "AY90" as my text to search for as it is in only one place in the FIRST column...at the bottom of the table.

Sorry there is a disagreement between board members... People like me are very grateful for any and all help we get...Keep up the good work

Many thanks...

[rliles]

Sorry...I didn't notice that .html was not a valid file extension for an attached file.

Here's my test code...

<SCRIPT>
function findRowByFirstColumn()
{
// I named the table
var objRow = document.getElementById("theTable").rows;
// I added the following line
var stFind = document.forms[0].elements[0].value.toLowerCase();
var row, len = objRow.length;
for (row=0; row<len; row++)
{
// I modified this line
if (objRow[row].cells[0].innerHTML.toLowerCase().indexOf(stFind) > (-1))
{
break;
}
}
if (row<len)
{
// I removed the alert and added this to highlight found data
objRow[row].cells[0].bgColor='yellow'
}
else
{
alert("Text not found.");
}
}

</SCRIPT>

<FORM>
<P ALIGN="Center">
Input Text to Find:&nbsp;&nbsp;<INPUT TYPE="Text">>&nbsp;&nbsp;
<INPUT TYPE="Button" VALUE="Find" onClick="findRowByFirstColumn()">
</FORM>

<P ALIGN="Center">

<FORM>

<TABLE BORDER="1" ID="theTable">

<TR ID="row1">
<TD>AX40</TD>
<TD>AY90</TD>
<TD>LAND</TD>
</TR>

<TR ID="row2">
<TD>BREAK</TD>
<TD>PUNK</TD>
<TD>AY90</TD>
</TR>

<TR ID="row3">
<TD>T0T7</TD>
<TD>SKUNK</TD>
<TD>Customer</TD>
</TR>

<TR ID="row4">
<TD>AY91</TD>
<TD>TRUNK</TD>
<TD>SR76</TD>
</TR>

<TR ID="row5">
<TD>AX40</TD>
<TD>AY90</TD>
<TD>LAND</TD>
</TR>

<TR ID="row6">
<TD>BREAK</TD>
<TD>PUNK</TD>
<TD>AY90</TD>
</TR>

<TR ID="row7">
<TD>T0T7</TD>
<TD>SKUNK</TD>
<TD>Customer</TD>
</TR>

<TR ID="row8">
<TD>AY92</TD>
<TD>TRUNK</TD>
<TD>SR76</TD>
</TR>

<TR ID="row9">
<TD>AX40</TD>
<TD>AY90</TD>
<TD>LAND</TD>
</TR>

<TR ID="row10">
<TD>BREAK</TD>
<TD>PUNK</TD>
<TD>AY90</TD>
</TR>

<TR ID="row11">
<TD>T0T7</TD>
<TD>SKUNK</TD>
<TD>Customer</TD>
</TR>

<TR ID="row12">
<TD>AY93</TD>
<TD>TRUNK</TD>
<TD>SR76</TD>
</TR>

<TR ID="row13">
<TD>AX40</TD>
<TD>AY90</TD>
<TD>LAND</TD>
</TR>

<TR ID="row14">
<TD>BREAK</TD>
<TD>PUNK</TD>
<TD>AY90</TD>
</TR>

<TR ID="row15">
<TD>T0T7</TD>
<TD>SKUNK</TD>
<TD>Customer</TD>
</TR>

<TR ID="row16">
<TD>AY94</TD>
<TD>TRUNK</TD>
<TD>SR76</TD>
</TR>

<TR ID="row17">
<TD>AX40</TD>
<TD>AY90</TD>
<TD>LAND</TD>
</TR>

<TR ID="row18">
<TD>BREAK</TD>
<TD>PUNK</TD>
<TD>AY90</TD>
</TR>

<TR ID="row19">
<TD>T0T7</TD>
<TD>SKUNK</TD>
<TD>Customer</TD>
</TR>

<TR ID="row20">
<TD>AY95</TD>
<TD>TRUNK</TD>
<TD>SR76</TD>
</TR>

<TR ID="row21">
<TD>AX40</TD>
<TD>AY90</TD>
<TD>LAND</TD>
</TR>

<TR ID="row22">
<TD>BREAK</TD>
<TD>PUNK</TD>
<TD>AY90</TD>
</TR>

<TR ID="row23">
<TD>T0T7</TD>
<TD>SKUNK</TD>
<TD>Customer</TD>
</TR>

<TR ID="row24">
<TD>AY90</TD>
<TD>TRUNK</TD>
<TD>SR76</TD>
</TR>
</TABLE>

</FORM>

[rliles]

Thanks Dave

[rliles]

Thanks Dave

Works like a charm and is exactly what I needed. Your expertise is greatly appreaciated.

[rliles]

Originally posted by Dave Clark
He, he, he... This function could even be given one more argument to allow it to search by any column in the table -- not just the first column (but, then, we'd have to change the name of the function :D ).

Dave

Yes I can see it...all you would have to do is pass the column to search...

I have a very limited knowledge of JS but I was able to fully understand the script you wrote and know exactly what it was doing. With that knowledge I was even able to write a script to clear previous searches and set the table and text field back to their original contition before any search was executed.

Great!!!!

I will be using this script in a table containing acronyms and definitions. My users will now be able to find a particular acronym (provided its in the table)

I have searched all the JavaScript sites I could find but nowhere was there such a script.

Again...You have my thanks.