how to search the given text in the particular <div> tag..

murali1983 · 02-13-2007, 10:51 AM

hi
my requirement is to search for the text available in the table, the table is inside the <div>, not in the entire web page.
<div>
<table>
</table>
</div>

how can i acheive this...

once the search result is found in the table..., i want the subsequent search for the same criteria to be made using a shortcut key..
ex:

i am having a text box for the search criteria...
and a search button to search the entered criteria...

first the user enters the search criteria in the text box and then clicks on the search button...., now if the search is found, then the particular text is highlighted....and i want to have a short cut key....after pressing that key...the subsequent search should be made...for the same given criteria...

thnx
murali

chump2877 · 02-13-2007, 12:56 PM

what is the DOM structure of your table? Is it relatively simple -- i.e.:

Code:

<table id="data">
    <tr>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio.</p>
        </td>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio.</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio.</p>
        </td>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio.</p>
        </td>
    </tr>
</table>

where each <p> tag is uninterrupted by further child nodes (again, for example)....

Or is it more like this:

Code:

<table id="data">
    <tr>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. <b>Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum</b> sem non odio.</p>
        </td>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. <span style="color:red">Morbi auctor, sapien ut posuere porta, magna nisl tempus leo</span>, ut dictum ipsum sem non odio.</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. <img src="picture.jpg" alt="a picture" /> Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio.</p>
        </td>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. <b><i>Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio.</i></b></p>
        </td>
    </tr>
</table>

where each <p> tag is interrupted by further child nodes....

The latter version is much harder to traverse, either with the DOM or regular expressions, using Javascript (at least for me)...

With PHP, I could do this a lot easier, because the regex functions seem more powerful to me (regardless of the complexity of the table's DOM structure)....

Do you have to use all Javascript for this?..I think I might use some AJAX to to send the table's innerHTML to a PHP script, use some regex there (to create the text highlighting), and then send the innerHTML back to your javascript to be reinserted into the DOM...And keep doing that every time the shortcut key is pressed thereafter...

murali1983 · 02-13-2007, 01:37 PM

here in my case the <p> tag is uninterrupted.

i am not very sure wheather i can use AJAX...,i should ask my TL n check...
can u give me the code to acheive this using ajax as u told.....