Question

我有一个简单的表格，如果元素为空，我想添加特定文本，到目前为止我的代码如下所示：

$("table").each(function (index, tableID) {
  $(tableID)
    .find("thead tr th")
    .each(function (index) {
      index += 1;
      $(tableID)
        .find("tbody tr td:nth-child(" + index + ")")
        .attr("data-title", $(this).text());
    });
});

使用此代码添加 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table> <thead> <tr> <th>By Year</th> <th>TEAM</th> <th>GP</th> </tr> </thead> <tbody> <tr> <td></td> <td>GSW</td> <td>6.1</td> </tr> <tr> <th>2016-17</th> <td>GSW</td> <td>6.1</td> </tr> <tr> <th>2015-16</th> <td>GSW</td> <td>6.1</td> </tr> </tbody> </table> 并且一切正常，当没有数据时我试图实现添加 data-title：所以我修改我的代码：

 $( "table" ).each( function( index, tableID ) {
     $( tableID ).find( "thead tr th" ).each( function( index ) {
         index += 1;
         $( tableID ).find( "tbody tr td:nth-child(" + index +  ")" ).attr( "data-title", $(this).text() );
         if ($("tbody tr td:nth-child(" + index +  ")" ).is(':empty')).append( "-" );
     });
 });

这部分代码在表元素为空时添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
    <thead>
      <tr>
        <th>By Year</th>
        <th>TEAM</th>
        <th>GP</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td>GSW</td>
        <td>6.1</td>
      </tr>
      <tr>
        <th>2016-17</th>
        <td>GSW</td>
        <td>6.1</td>
      </tr>
      <tr>
        <th>2015-16</th>
        <td>GSW</td>
        <td>6.1</td>
      </tr>
    </tbody>
  </table>

不起作用，有人可以帮我解决这个问题吗？

Answer 1

您的 if 语句未使用有效语法。您需要 if 之后的表达式主体，其中包含要执行的代码。您不能从 if 语句本身调用方法。

试试这个：

$("table").each(function(_, table) {
  $(table).find("thead tr th").each(function(i) {
    let $th = $(this);
    let $td = $(table).find("tbody tr td:nth-child(" + (i + 1) + ")");
    $td.attr("data-title", $th.text());
    if ($td.is(':empty')) {
      $td.append("-");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>By Year</th>
      <th>TEAM</th>
      <th>GP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>GSW</td>
      <td>6.1</td>
    </tr>
    <tr>
      <th>2016-17</th>
      <td>GSW</td>
      <td>6.1</td>
    </tr>
    <tr>
      <th>2015-16</th>
      <td>GSW</td>
      <td>6.1</td>
    </tr>
  </tbody>
</table>

但是，值得注意的是，使用一行代码可以使这段代码更加简洁：

$('tbody td:empty').text('-');

您用来循环遍历 th/td 并添加 data 属性的代码似乎几乎完全多余，因为 th 值可以在使用点。

Answer 2

我稍微简化了代码。我发现将标题数据标题值设为数组更容易，我可以在每次迭代中引用。空值的“-”只是附加在 jQuery 链末尾的三元表达式：

$(this).attr("data-title", h[i]).text($(this).text() || "-");

$("table").each(function() {
  let h = [], i = 0
  $("thead tr th").each(function() {
    h.push($(this).text());
  })
  $(this).find("tbody tr>*").each(function() {
    $(this).attr("data-title", h[i]).text($(this).text() || "-");
    i++;
    if (i >= h.length) i = 0
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>By Year</th>
      <th>TEAM</th>
      <th>GP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>GSW</td>
      <td>6.1</td>
    </tr>
    <tr>
      <th>2016-17</th>
      <td>GSW</td>
      <td>6.1</td>
    </tr>
    <tr>
      <th>2015-16</th>
      <td>GSW</td>
      <td>6.1</td>
    </tr>
  </tbody>
</table>

检查元素是否有文本，如果没有则添加一个

2 个答案: