Function to find text in a td element not working

Question

all,

I have seen several methods on SO here on how I can find the text, or html, written in a td element in a table. For some reason they don't appear to be working for me. I'm obviously doing something quite wrong but I cannot figure out what.

EDIT: The problem is the html() from my td always shows as undefined. I cannot seem to get the text (EG company0) using html(), text(), etc.

Here are my functions. #searchbox is an input type:text

$(document).ready(function () {
$('#searchbox').change(function () {
    var searchText = $(this).val();
    $('.prospect_table tr').each(function () {
        var obj =  $(this).find('.propsect_td');
        if (typeof obj != 'undefined') {
            if (hideText(obj.html(), searchText))
                $(this).show();
            else
                $(this).hide();
        }
    });
});
});

function hideText(prospectName, text) {
    if (prospectName == 'undefined')
        return false;

    if (prospectName.toLowerCase().indexOf(text.toLowerCase()) >= 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}

Here is my source for the page

<input type="text" name="txtSearch" id="searchbox" value="Begin typing here..." />

<table class="prospect_table">
<tr>
    <th>
        ProspectName
    </th>
    <th>
        Inactive
    </th>
    <th></th>
</tr>

<tr>
    <td class="prospect_td">
        Company0
    </td>
    <td>
        <input class="check-box" disabled="disabled" type="checkbox" />
    </td>
    <td>
        <a href="/CrmWeb/Company/Edit/0">Edit</a> |
        <a href="/CrmWeb/Company/Details/0">Details</a> |
        <a href="/CrmWeb/Company/Delete/0">Delete</a>
    </td>
</tr>
<tr>
    <td class="prospect_td">
        Company1
    </td>
    <td>
        <input class="check-box" disabled="disabled" type="checkbox" />
    </td>
    <td>
        <a href="/CrmWeb/Company/Edit/0">Edit</a> |
        <a href="/CrmWeb/Company/Details/0">Details</a> |
        <a href="/CrmWeb/Company/Delete/0">Delete</a>
    </td>
</tr>

etc...

Any suggestions on how I can improve this and make it work? Maybe I need more id tags as opposed to classes?

Thanks for any help or suggestions!

Answer 1

Try this. Changed'.propsect_td' to '.prospect_td', 'IndexOf' to 'indexOf' and replaced typeof obj != 'undefined' with obj.length != 0.

$(document).ready(function () {
$('#searchbox').change(function () {
    var searchText = $(this).val();
    $('.prospect_table tr').each(function () {
        debugger
        var obj =  $(this).find('.prospect_td');
        if (obj.length != 0) {
            if (hideText(obj.html(), searchText))
                $(this).show();
            else
                $(this).hide();
        }
    });
});
});

function hideText(prospectName, text) {
    debugger
    if (prospectName == 'undefined')
        return false;

    if (prospectName.toLowerCase().indexOf(text.toLowerCase()) >= 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}

Answer 2

$(document).ready(function () {
$('#searchbox').change(function () {
    var searchText = $(this).val();
    $('.prospect_table tr').each(function () {
        var obj =  $(this).find('.prospect_td');

        console.log(obj.text());
        if (typeof obj != 'undefined') {
            if (hideText(obj.text(), searchText))
                $(this).show();
            else
                $(this).hide();
        }
    });
});
});

function hideText(prospectName, text) {
    if (prospectName == 'undefined')
        return false;

    if (prospectName.toLowerCase().indexOf(text.toLowerCase()) >= 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}

Few typos fixed... and rather than html() i use text() property. Fiddle: http://jsfiddle.net/bn1403nk/