时间戳

首页 > 解决方案 > 使用 JQuery 获取单元格值

javascript - 使用 JQuery 获取单元格值

问题描述

使用 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”.... 按此顺序排列，但实际输出是一串行。

标签： javascriptjqueryhtml

解决方案

您可以使用$(".table td")as 选择器通过tds 循环并使用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>

推荐阅读