[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