Find the row value in HTML using jQuery

Question

I am trying to find the $108.04 value in following HTML using jQuery. I used following code but I am getting an empty value. I am getting this html in JSON response.

jQuery:

$.ajax({
    type: "GET",
    url: '@Url.Action("GetDynamicMonthlyScheduleForDCT", "PaymentInfo")',
    data: { polNo: polNo, DueDay: dueDay, pmtPlanCode: pmtPlanCode, premiumAmt: '@ViewBag.premiumAmt', polEffDate: '@ViewBag.polEquityDate', polExpDate: '@ViewBag.polExpDate', AcctRuleCode: '@ViewBag.AcctRuleCode' },
    contentType: "application/html",
    traditional: true,
    cache: true,
    dataType: 'html',
    success: function (response) {

        $.unblockUI();
        //If JOSN data is being returned then try block will handle it . If html data is returned then handling it in exception block.
        try {
            var objData = JSON.parse(response);
            if (objData[0] == "ErrorMessage") {

                $("#ErrorMess").show();
                $("#ErrorMess").html(objData[1]);
            }
        }

        catch (e) {
            //$("#monthlySchConfirmationGrid").html(response);
            if (response == '"Exception"') {
                $("#btnMonthlySchclose").hide();
                $("#btnMonthlySchPrint").hide();
                $("#monthlySchData").hide();
                $("#btnMonthlySch").hide();
                $("#ErrorMess").hide();
            }

            else {
                if ($("#btnMonthlySchclose").is(":visible")) {
                }
                else {
                    $("#btnMonthlySch").show();
                    $("#ErrorMess").hide();
                }
                $this = $(response);
                var str = '';
                str = $(this).children('td:eq(4)').text();
                alert(str);

HTML

<div id="grid">
    <table class="paymentGridTable">
        <thead>
            <tr class="paymentGridHead">
                <th scope="col">Installments</th>
                <th scope="col">Due Date</th>
                <th scope="col">Premium</th>
                <th scope="col">Service Charge</th>
                <th scope="col">Total Payment</th>
            </tr>
        </thead>
        <tbody>
            <tr class="paymentGridRow">
                <td class="columnInstallment">1</td>
                <td class="columnDate"> 
                    <span>09/10/2014</span>     
                </td>
                <td class="columnmonthlyData">$105.04</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">**$108.04**</td>
            </tr>
            <tr class="paymentGridAltRow">
                <td class="columnInstallment">2</td>
                <td class="columnDate"> 
                    <span>12/21/2012</span>     
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridRow">
                <td class="columnInstallment">3</td>
                <td class="columnDate"> 
                    <span>01/21/2013</span>     
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridAltRow">
                <td class="columnInstallment">4</td>
                <td class="columnDate"> 
                    <span>02/21/2013</span>     
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridRow">
                <td class="columnInstallment">5</td>
                <td class="columnDate"> 
                    <span>03/21/2013</span>     
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridAltRow">
                <td class="columnInstallment">6</td>
                <td class="columnDate"> 
                    <span>04/21/2013</span>
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridRow">
                <td class="columnInstallment">7</td>
                <td class="columnDate"> 
                    <span>05/21/2013</span>
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridAltRow">
                <td class="columnInstallment">8</td>
                <td class="columnDate"> 
                    <span>06/21/2013</span>
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridRow">
                <td class="columnInstallment">9</td>
                <td class="columnDate"> 
                    <span>07/21/2013</span>
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridAltRow">
                <td class="columnInstallment">10</td>
                <td class="columnDate"> 
                    <span>08/21/2013</span>
                </td>
                <td class="columnmonthlyData">$52.40</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.40</td>
            </tr>
            <tr class="paymentGridRow">
                <td class="columnInstallment">11</td>
                <td class="columnDate"> 
                    <span>09/21/2013</span>
                </td>
                <td class="columnmonthlyData">$52.36</td>
                <td class="columnmonthlyData">$3.00</td>
                <td class="columnmonthlyData">$55.36</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

You are targeting your element incorrectly. Should be something like:

var str = $('<div/>').append(response).find('.paymentGridTable tbody tr:first-child td:eq(4)').text();

Note you have to append your response to an empty div first in order to correctly find the contents.

Fiddle here: http://jsfiddle.net/vjsjtyt9/

Answer 2

Are you wanting the row or the element?

The row:

$("tr:contains('$108.04')");

The element:

$("td:contains('$108.04')");

So you are wanting the third td with the class columnMonthlyData?

var str = $("td.columnMonthlyData:eq(2)").html();

Answer 3

There are a couple of problems with the code.

1)
str = $(this).children('td:eq(4)').text();
this isn't a jQuery object at this point but rather the ajax success function.
You'll have to save the jQuery object before into a variable prior to the ajax call.

2)
If $(this) is the table, children won't work, as these are only the immediate children of the table: thead and tbody.
If you want to select the 4th td which holds the value 108 (like you tried to), you'd have to do something like this:
$(this).find('tbody tr:first-child td:eq(4)').text();
or
$('.paymentGridTable').find('tbody tr:first-child td:eq(4)').text();

http://jsfiddle.net/21Lv4xmf/

3)
This still doesn't search for the td with the value 108. I'm not sure what your real goal is here, but if you want to search for the td containing a certain value, look at Chris' answer.