Unable to get HTML table rows values using jQuery

Question

I have some HTML that looks as follows:

   <table id="resultsTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
        <thead>
        <tr>
            <th>Company Name</th>
            <th>Tours Offered</th>
            <th>Average Rating</th>
            <th>Total Reviews</th>
        </tr>
        </thead>

        <tbody class="searchable">
        @foreach (var item in Model.AccommodationList)
        {
            <tr>
                <td class="accommodationName">
                    @Html.ActionLink(item.AccommodationName, "ViewHomePage", "AccommodationHomepage", new {accommodationId = item.AccommodationId}, null)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FormattedAddress)
                </td>
                <td>
                     <Deleted for brevity>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TotalReviews)
                </td>
                <td class="latitudeCell" style="display: none;">
                    @Html.DisplayFor(modelItem => item.Latitude)
                </td>
                <td class="longitudeCell" style="display: none;">
                    @Html.DisplayFor(modelItem => item.Longitude)
                </td>
            </tr>
        }
        </tbody>
    </table>

I am trying to get the value of the accommodation name, latitude and longitude in each row with the following jQuery:

    $('#resultsTable tbody tr').each(function () {
        var latitude = $(this).find(".latitudeCell").html();
        var longitude = $(this).find(".longitudeCell").html();
        var accommodationName = $(this).find(".accommodationName").html();

    });
}

However I must be doing something incorrectly because I'm not able to get any values.

Sorry, I was mistaken - deleted the first comment - Have you tried .text() instead of .html()? Also, are you making sure that this script is running after the values are loaded? — ntgCleaner
– ntgCleaner, Commented Oct 29, 2015 at 19:40
is the .each() function running? what happens when you try this and how are you trying to show each variable? — ntgCleaner
– ntgCleaner, Commented Oct 29, 2015 at 19:42
My guess is you are trying to .each before the table rows are added to the table. — jeffjenx
– jeffjenx, Commented Oct 29, 2015 at 19:49

Shabir A. · Accepted Answer · 2015-10-29 19:44:41Z

2

Use javascript table.rows function and textContent property to get the inner text of the cell like you can do something like below:

for(var i = 1, row; row = table.rows[i]; i++)
        {           

            var col1 = row.cells[0].textContent;
            var col2 = row.cells[1].textContent;
        }       var col3 = row.cells[2].textContent;

Don't use innerText it is much slower than textContent and also doesn't work in firefox.

answered Oct 29, 2015 at 19:44

Shabir A.

3061 silver badge10 bronze badges

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

Comments

Devnsyde · Accepted Answer · 2015-10-29 20:03:06Z

1

I wrote up a fiddle and modified some of your code so I could put text in your cells, I am wondering if this will help you? If not could you write up a small fiddle and I can provide some more assistance.

https://jsfiddle.net/y3llowjack3t/8cL94hgq/

  $('#resultsTable tbody tr').each(function () {
    var latitude = $(this).find(".latitudeCell").html();
    var longitude = $(this).find(".longitudeCell").html();
    var accommodationName = $(this).find(".accommodationName").html();
    alert(latitude);
});

answered Oct 29, 2015 at 20:03

Devnsyde

1,3571 gold badge14 silver badges34 bronze badges

1 Comment

Randy Minder Over a year ago

Thank you.. I will take a look.

PeterKA · Accepted Answer · 2015-10-29 23:34:13Z

1

You are getting the data correctly but, you don't seem to do anything with the values you obtain from the table. And, after .each(), you will not have access to even the values from the last row since you're using local variables. You can create an array that has all the data.

Give this a try:

var locations = $('#resultsTable tbody tr').map(function() {
    var location = {};
    location.latitude = $(this).find(".latitudeCell").html();
    location.longitude = $(this).find(".longitudeCell").html();
    location.accommodationName = $(this).find(".accommodationName").html();
    return location;
}).get();
console.log( locations );
//OUTPUT: [{"latitude": "<val>","longitude": "<val>", "accommodationName": "<val>"},{.....},....]

edited Oct 29, 2015 at 23:34

answered Oct 29, 2015 at 19:49

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

vicrec · Accepted Answer · 2015-10-29 20:11:14Z

0

Your code works for me: example

In the code you paste you put a } more, try to check if there's some issues with brakets.

answered Oct 29, 2015 at 20:11

vicrec

264 bronze badges

Comments

Brino · Accepted Answer · 2015-10-29 20:27:11Z

Here is a working example. In your example, I did not see how you were calling your function. I enclosed your function in $().ready() so that it is called when the DOM is ready. You will want to call your function any time the tan;e content changes.

$().ready(function() {

  $('div#cellValues').empty();
  $('div#cellValues').append('<ul></ul>');

  $('#resultsTable tbody tr').each(function(index) {
    var latitude = $(this).find('.latitudeCell').html();
    var longitude = $(this).find(".longitudeCell").html();
    var accommodationName = $(this).find(".accommodationName").html();
    
    $('div#cellValues ul').append('<li>' + accommodationName + ': [' + latitude + ',' + longitude + ']</li>');
  });
});

#cellValues {
  border: 1px solid red;
}
#cellValues::before {
  content: "Cell Values:";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="cellValues"></div>

<table id="resultsTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
  <thead>
    <tr>
      <th>Company Name</th>
      <th>Tours Offered</th>
      <th>Average Rating</th>
      <th>Total Reviews</th>
    </tr>
  </thead>

  <tbody class="searchable">
    <tr>
      <td class="accommodationName">accomidationName1</td>
      <td>FormattedAddress1</td>
      <td></td>
      <td>TotalReviews1</td>
      <td class="latitudeCell" style="display: none;">Latitude1</td>
      <td class="longitudeCell" style="display: none;">Longitude1</td>
    </tr>

    <tr>
      <td class="accommodationName">accomidationName2</td>
      <td>FormattedAddress2</td>
      <td></td>
      <td>TotalReviews2</td>
      <td class="latitudeCell" style="display: none;">Latitude2</td>
      <td class="longitudeCell" style="display: none;">Longitude2</td>
    </tr>

    <tr>
      <td class="accommodationName">accomidationName3</td>
      <td>FormattedAddress3</td>
      <td></td>
      <td>TotalReviews3</td>
      <td class="latitudeCell" style="display: none;">Latitude3</td>
      <td class="longitudeCell" style="display: none;">Longitude3</td>
    </tr>

  </tbody>
</table>

Collectives™ on Stack Overflow

Unable to get HTML table rows values using jQuery

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related