dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

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

Hybrid View

  1. #1
    Join Date
    Mar 2003
    Location
    Colorado
    Posts
    8

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

    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???

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    2,653
    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

  3. #3
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    2,653
    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/showt...&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

  4. #4
    Join Date
    Mar 2003
    Location
    Colorado
    Posts
    8

    Talking Many Thanks...

    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...

  5. #5
    Join Date
    Mar 2003
    Location
    Colorado
    Posts
    8
    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>

  6. #6
    Join Date
    Mar 2003
    Location
    Colorado
    Posts
    8

    Talking Many Thanks...

    Thanks Dave

  7. #7
    Join Date
    Mar 2003
    Location
    Colorado
    Posts
    8

    Talking Many Thanks...

    Thanks Dave

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

  8. #8
    Join Date
    Mar 2003
    Location
    Colorado
    Posts
    8

    Thumbs up

    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 ).

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles