Question

我没有找到结果时试图在表格中显示消息（对不起，没有找到条目。请扩展您的搜索＆＃34;）。你知道我该怎么办？

目前我的代码：

＆＃13;

$('#Search').on('keyup', function() {
  var value = $(this).val();
  var patt = new RegExp(value, "i");

  $('#Data').find('tr').each(function() {
    if (!($(this).find('td').text().search(patt) >= 0)) {
      $(this).not('#header').hide();
    }
    if (($(this).find('td').text().search(patt) >= 0)) {
      $(this).show();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input id="Search" type="text" placeholder="Rechercher un nom ou prénom" /></div>
<table id="Data">
  <thead>
    <tr id="header">
      <th>Nom</th>
      <th>Prénom</th>
    </tr>
  </thead>
  <tr>
    <td>Dupont</td>
    <td>Pierre</td>
  </tr>
  <tr>
    <td>Bertrand</td>
    <td>Philippe</td>
  </tr>
  <tr>
    <td>François</td>
    <td>Xavier</td>
  </tr>
</table>

＆＃13;

谢谢

Answer 1

使用此代码。计算未显示的项目数，如果此数字与所有tr的数量相等，则显示td。

$('#Search').on('keyup', function() {
  $("#noData").remove();
  var value = $(this).val();
  var patt = new RegExp(value, "i");
  var sw = 0;
  var counter = 0;
  $('#Data').find('tr').each(function() {
    counter++;
    if (!($(this).find('td').text().search(patt) >= 0)) {
      $(this).not('#header').hide();
      sw++;
    } else if (($(this).find('td').text().search(patt) >= 0)) {
      $(this).show();
    }
  });
  if (sw == counter) {
    $("#Data").append(`<tr id="noData">
      <td colspan="2">No data</td>
    </tr>`);
  } else {
    $("#noData").remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input id="Search" type="text" placeholder="Rechercher une monture..." /></div>
<table id="Data">
  <thead>
    <tr id="header">
      <th>Nom</th>
      <th>Prénom</th>
    </tr>
  </thead>
  <tr>
    <td>Dupont</td>
    <td>Pierre</td>
  </tr>
  <tr>
    <td>Bertrand</td>
    <td>Philippe</td>
  </tr>
  <tr>
    <td>François</td>
    <td>Xavier</td>
  </tr>
</table>

Answer 2

以下代码应该完成这项工作 -

    var table = $('#Data');
    var emptyMessageRow = $('<tr>Sorry, no entry found. Please extend your search</tr>');

    function _findMatch() {
       var isMatchAvailable = false;
       table.find('tr').each(function () {
          var matchFound = $(this).find('td').text().search(patt) >= 0;
          if (!matchFound) {
             $(this).not('#header').hide();
          } else {
             $(this).show();
             isMatchAvailable = true;
          }
       });
       return isMatchAvailable;
    }

    var isMatchAvailable = _findMatch();
    if (!isMatchAvailable) {
        table.append(emptyMessageRow);
    } else {
        emptyMessageRow.remove();
    }

如果没有搜索结果，则显示消息

2 个答案: