[jQuery] Re: Text finder in html

[Andy Matthews]

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