Hmmm ... yes, this is similar to what I need but I can't get your code
to do anything. :(
If I understand the code correctly, you capture the keyup event for a
input text field called 'filter' (which isn't included in the HTML you
posted) and then loop through each <td> with the 'leadName' class (in
your example there is only one) and compare its contents with that of
the 'filter' field, hiding it if it doesn't match, showing it if it
does, assigning or un-assigning the 'hiddenTR' class (also not
included but I imagine it's just a style visitbility:hidden ...)
So I am basically at the same point with your code that I am with
mine, namely, I think I am doing everything correctly but nothing
happens!
When I iterate over my 'columns' I see that each one is a jQuery
Object with addClass(), append(), and all the other functions. But
when I call them, nothing happens. Similarly with your code, I added a
'filter' input, defined a 'hiddenTR' class, type in the 'filter' text
field, and nothing happens.
I know you said it wasn't 100%, but does it at least do something for
you? If I could get to the point where it at least successfully
executed some jQuery function on each <td> I could probably get mine
to work.
Thanks for the post!
Bob
On 6 Nov, 22:07, "Andy Matthews" <[EMAIL PROTECTED]> wrote:
> I wrote something exactly like this for a project. It's not 100% complete,
> but you're welcome to it. Maybe it'll help?
>
> // define the table
> var $table = $('#leadsTable tbody tr .leadName');
>
> // the on keyDown event handler
> $('#filter').keyup(function(){
> // get the current value of the text field
> var string = $(this).val().toUpperCase();
> // loop over each item in $table
> $table.each(function(){
> // set a string equal to the contents of the cell
> var contents = $('a',this).html().toUpperCase();
> // check the string against that cell
> if ( !contents.match('^' + string) ){
> // if what the user typed in doesn't match the cell
> then hide that TR.
> $(this).parent('tr').attr('class','hiddenTR');
> } else {
> // if it does match, unhide it
> $(this).parent('tr').removeAttr('class','hiddenTR');
> }
> });
>
> });
>
> // here my HTML
> <table id="leadsTable">
> <thead>
> <tr>
> <td class="leadName">Customer Name</td>
> </tr>
> </thead>
> <tbody>
> <!-- start: loop -->
> <tr><td class="leadName" width="100%">Customer Name</td></tr>
> <!-- end: loop -->
> </tbody>
> </table>
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
>
> Behalf Of syg6
> Sent: Tuesday, November 06, 2007 9:02 AM
> To: jQuery (English)
> Subject: [jQuery] Text finder in html
>
> I am trying to create a javascript-based text finder using jQuery. I have a
> table like this:
>
> <table id="dataTable">
> <tr>
> <td>
> data 1
> </td>
> </tr>
> <tr>
> <td>
> data 2
> </td>
> </tr>
> <tr>
> <td>
> data 3
> </td>
> </tr>
> </table>
>
> And I would like to be able to search for a text in any of the <td>s and
> highlight it. I tried something like this:
>
> function find()
> {
> text = jQuery("#findText").val();
> columns = jQuery("table#dataTable td");
>
> for (i=0; i<columns.length; i++)
> {
> if (columns[i].innerHTML.indexOf(text) != -1)
> {
> jQuery(columns[i]).addClass("test");
> }
> }
>
> I have defined the test style like this:
>
> <style type="text/css">
> a.test { font-weight: bold; }
> </style>
>
> When I run the script it does nothing. Not sure why. I've debugged it.
> jQuery(columns[i]) is an [Object] that has all the normal jQuery functions
> -- addClass(), append(), etc. but when I call any of them nothing happens.
>
> Can someone tell me what I am doing wrong?
>
> Thanks!
> Bob
