使用JQuery获取单元格值

时间：2019-04-06 05:44:19

标签： javascript jquery html

使用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” ....，但实际输出是一行字符串。

3 个答案:

答案 0 :(得分：1)

您可以使用$(".table td")作为选择器来循环遍历td，并使用text()而不是html()来获取文本

$(".table td").each(function() {
  console.log($(this).text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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>

答案 1 :(得分：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>

答案 2 :(得分：0)

您应该在表中添加id才能将其命名为#table。此外，您还可以使用text()函数来获取跨度文本。

$(document).ready(function(){
  $("table tr").each(function(){
    var result = $(this).find('span').text();
    //there are span elements that are empty, so i skip these ones
    if(result != ''){
        alert(result);
    }

  });
});
相关问题
最新问题