CODEWITHSUNDEEP
jquery
Joe Essey
Joe Essey

Reputation: 3527

How to iterate through a table's data to find specific text?

I have a table of error messages and I want to bold one in the specific case that it matches an exact string of text.

Here's the table:

<table width="1000px" border="0" cellpadding="0" class="search-messages">

    <logic:notEmpty name="pSRMessages" scope="request">
        <tr><td><h4><fmt:message key="SCN-1055"/></h4></td></tr>
        <logic:iterate id="rTMessage" name="pSRMessages" scope="request" >
            <tr><td><bean:write name="rTMessage"/></td></tr>
        </logic:iterate>
    </logic:notEmpty>
    <tr><td><h4><fmt:message key="SCN-1056"/></h4></td></tr>
    <logic:notEmpty name="pSMessages" scope="request">
        <logic:iterate id="message" name="pSMessages" scope="request" >
            <tr><td><bean:write name="message"/></td></tr>
        </logic:iterate>
    </logic:notEmpty>
    <logic:present name="pRList" scope="request" >
</table>

I have this method written but I'm getting an error:

$(function () {
    if ($('.search-messages').each('tr').each('td').text() == 'Some specific line of text){
        $('this').css('font-weight', 'bold');
    }
});

The error message in js console:

Uncaught TypeError: Object tr has no method 'call'

It seems like I can't use $('this') in this case. How do I identify the current td that matches the string and change it's css?

Thanks.

Upvotes: 0

Views: 139

Answers (4)

Manoj Yadav
Manoj Yadav

Reputation: 6612

Your each function call is not correct, example using filter:

$('.search-messages td').filter(function() {
    return $(this).text() == 'Some specific line of text';
}).css('font-weight', 'bold');

jsFiddle

Using each 

$('.search-messages tr td').each(function() {
    var el = $(this);
    if (el.text() == 'Some specific line of text') {
        el.css('font-weight', 'bold');
    }
});

jsFiddle

Upvotes: 5

Dimitar Dimitrov
Dimitar Dimitrov

Reputation: 15148

How about something like this:

$(".search-messages tr td").each(function(){ 
    var current = $(this);
    if(current.text() === "this will be bolded") { 
        current.toggleClass("special");
    }
});

Here is a fiddle to demonstrate: http://jsfiddle.net/S9cs3/

Upvotes: 2

hannebaumsaway
hannebaumsaway

Reputation: 2734

I actually have a site that uses the following code to "search-as-you-type" through a table's rows and highlight matches:

$('#search input').on('keyup', function(e) {
    var str = $(this).val().toLowerCase();
    var found = 0;
    if (str.length == 0 || e.keyCode == 27) { //user hit Esc or has no text in search box, clear out
        $('#search img').click();
    }
    else { //text has been entered, search for it
        $('#draft-board tbody tr').each(function() { //each row
            if ($(this).children('td.player').html().toLowerCase().search(str) > -1) { //search string found in current row! highlight it and scroll to it
                $(this).addClass('selected');
                if (found == 0) {
                    scroll(0,$(this).offset().top);
                }
                found += 1;
            }
            else { //search string not present in this row
                $(this).removeClass('selected');
            }
        });

        var tmp;
        if (found == 1) tmp = 'match';
        else tmp = 'matches';
        $('#search span').html(found + ' ' + tmp);
    }
});

Upvotes: 0

Satpal
Satpal

Reputation: 133403

try this

$('.search-messages td').each(function() {
    if($(this).html() == 'Some specific line of text')
        $(this).css('font-weight', 'bold');
}

Upvotes: 1

Related Questions