Question

我有一些HTML，如下所示：

   <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>

我试图通过以下jQuery获取每行中的住宿名称，纬度和经度的值：

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

    });
}

但是我必须做错事，因为我无法获得任何价值。

Answer 1

使用javascript table.rows函数和textContent属性获取单元格的内部文本，就像您可以执行以下操作一样：

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;

不要使用innerText，它比textContent慢得多，而且在firefox中也不起作用。

Answer 2

您正在正确地获取数据但是，您似乎对从表中获得的值做了任何事情。而且，在.each()之后，您将无法访问最后一行中的值，因为您正在使用局部变量。您可以创建包含所有数据的数组。

尝试一下：

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

Answer 3

我写了一个小提琴并修改了你的一些代码，所以我可以在你的单元格中放置文字，我想知道这对你有用吗？如果没有，你可以写一个小小提琴，我可以提供一些帮助。

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

Answer 4

您的代码适合我： example

在您粘贴的代码中，您添加了}个，尝试检查是否存在一些问题。

Answer 5

这是一个工作示例。在你的例子中，我没有看到你如何调用你的函数。我将您的函数包含在$().ready()中，以便在DOM准备好时调用它。只要tan; e内容发生变化，您就会想要调用您的函数。

＆＃13;

$().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>');
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

无法使用jQuery获取HTML表行值

5 个答案: