Блог

Главная - Вопросы по программированию - Проверьте, есть ли в элементе текст, если его нет, добавьте его

Проверьте, есть ли в элементе текст, если его нет, добавьте его

#javascript #jquery

Вопрос:

У меня есть простая таблица, и я хочу добавить определенный текст, если элемент пуст, пока мой код выглядит так:

 $("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>

Эта часть кода, где я добавляю - , когда элемент таблицы пуст, не работает, может ли кто-нибудь попытаться помочь мне с этим?

Комментарии:

1. У вас есть вопрос и код. В чем ваша настоящая проблема?

2. @jabaa, эта часть кода, в которой я добавляю — когда элемент таблицы пуст, не работает

3. Вы не можете вызывать метод по if условию: if ($("tbody tr td:nth-child(" index ")" ).is(':empty')).append

Ответ №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 значение может быть считано в момент использования.

Ответ №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>
Метки: , , ,