javascript - 使用 JQuery 获取单元格值

Question

使用 JQuery 获取单元格值。

我试过使用下面的代码:

$("#table tr").each(function(){
    var result = $(this).find("td:first").html();
    alert(result);
});

但它返回所有第一行的字符串

<table class="table table-bordered">
        <thead>
            <tr>
                <td style="white-space: nowrap" class="form-label">
                    <span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
                </td>
                <td style="white-space: nowrap">
                    <span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
                </td>
            </tr>
        </thead>
        <tbody>

我希望值“jun 17”、“Jul 17”……按此顺序排列，但实际输出是行的字符串。

Answer 1

使用 text 获取值 - 并使用 .table 而不是 #table:

$(".table td").each(function() {
  var result = $(this).text().trim();
  if (result) console.log(result);
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <td style="white-space: nowrap" class="form-label">
        <span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
      </td>
    </tr>
  </thead>
  <tbody>

如果你想收集所有的行，使用数组:

var rows = [...$(".table td")].map(e => $(e).text().trim()).filter(e => e);

console.log(rows);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <td style="white-space: nowrap" class="form-label">
        <span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
      </td>
      <td style="white-space: nowrap">
        <span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
      </td>
    </tr>
  </thead>
  <tbody>