CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc
Randy Minder
Randy Minder

Reputation: 48402

Unable to get HTML table rows values using jQuery

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.

Upvotes: 0

Views: 1487

Answers (5)

PeterKA
PeterKA

Reputation: 24638

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>"},{.....},....]

Upvotes: 1

Brino
Brino

Reputation: 2502

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>

Upvotes: 0

vicrec
vicrec

Reputation: 26

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.

Upvotes: 0

Devnsyde
Devnsyde

Reputation: 1337

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

Upvotes: 1

Shabir A.
Shabir A.

Reputation: 306

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.

Upvotes: 2

Related Questions