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>

I thought $(this).children('td:eq(4)').text(); will give me 18.04 value. any idea how can I get it? — nimish jain
– nimish jain, Commented Sep 10, 2014 at 20:46
'this' in success callback points not to <tr> or <table>, so you can't find <td> in jqXHR element. — Regent
– Regent, Commented Sep 10, 2014 at 20:52

Andy · Accepted Answer · 2014-09-10 20:54:21Z

1

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.

answered Sep 10, 2014 at 20:54

Andy

30.2k9 gold badges43 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nimish jain Over a year ago

I tried $(this).find('tbody tr:first-child td:eq(4)').text(); but it is not fetching 108.04 value , still giving me empty. I am getting the HTML in JSON response. It is not on page so I can't use $('.paymentGridTable').find('tbody tr:first-child td:eq(4)').text(); . I have to use $(this) because this is holding the html.

nimish jain Over a year ago

I tried this - str = $(this).find('.paymentGridTable tbody tr:first-child td:eq(4)').text() but still I got empty value. any suggestion?

Andy Over a year ago

@user3171008 Well you are assigning $(response) to $this, but 2 lines after you are trying to use $(this). Which won't work. Try it with $this.find...

Dave · Accepted Answer · 2014-09-10 21:16:56Z

0

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/

edited Sep 10, 2014 at 21:16

answered Sep 10, 2014 at 21:06

Dave

11k3 gold badges45 silver badges54 bronze badges

4 Comments

nimish jain Over a year ago

If you see my code , you will notice that I am getting html in a response to JSON call and I am assigning to $(this). paymentGridTable is not really present on that page . Can I use something like $(this).find ($('.paymentGridTable tbody tr:first-child td:eq(4)').text());

Dave Over a year ago

@user3171008 Yes but you will have to append your response into an empty div first in order to correctly find the content. Updated answer.

nimish jain Over a year ago

Dave : I'd like to loop through from 2nd row to last row and change the Installments column value . how can I loop through and update the value?

Dave Over a year ago

@user3171008 This should really be a new question but here's something that should get you started: jsfiddle.net/01eu1wt0

Chris Caviness · Accepted Answer · 2014-09-10 20:59:45Z

0

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();

edited Sep 10, 2014 at 20:59

answered Sep 10, 2014 at 20:45

Chris Caviness

5963 silver badges10 bronze badges

6 Comments

nimish jain Over a year ago

I want the value $108.04 to be fetched in a variable named str .

Chris Caviness Over a year ago

I don't understand? If you know what you are wanting to search for, then why not assign it directly? var str = "$108.04" ?

nimish jain Over a year ago

Chris - 108.04 is not going to be always the same . It might change depending on selection. So I want to fetch that row value which contants 108.04 right now . I just gave it for example .

Chris Caviness Over a year ago

Okay, clearer. So take the $108.04 out and put the selector string together with a variable ("tr:contains('"+search+"')") should get the row for you.

nimish jain Over a year ago

I tried this - str = $(this).find('.paymentGridTable tbody tr:first-child td:eq(4)').text() but still I got empty value.

|

Collectives™ on Stack Overflow

Find the row value in HTML using jQuery

3 Answers 3

3 Comments

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related