如何在表格无搜索结果时显示指定提示信息？

Hey there! Let's get that "no results" message showing up when your search doesn't match any table entries. Here's a straightforward way to adjust your code:

Step 1: Add the no-results element to your HTML #

First, put this hidden message somewhere near your table (like right below it) — it'll only show when there's no matching data:

<div id="noResults" style="display: none; margin-top: 10px; color: #666;">
  Sorry, no entry found. Please extend your search
</div>

Step 2: Update your JavaScript logic #

We'll add a counter to track how many rows are visible after the search, then toggle the message based on that count:

$('#Search').on('keyup', function() {
  var value = $(this).val();
  var patt = new RegExp(value, "i");
  var visibleRowCount = 0; // Track how many non-header rows are visible

  $('#Data').find('tr').each(function() {
    // Skip the header row so we don't count it
    if ($(this).is('#header')) {
      return;
    }

    const rowMatches = $(this).find('td').text().search(patt) >= 0;
    if (rowMatches) {
      $(this).show();
      visibleRowCount++;
    } else {
      $(this).hide();
    }
  });

  // Show the no-results message only if no rows are visible
  $('#noResults').toggle(visibleRowCount === 0);
});

Quick notes for flexibility: #

• If your header is in a <thead> instead of using an id="header", replace the skip check with:

  if ($(this).closest('thead').length) return;
  

• Feel free to style the #noResults div however you want — adjust the CSS to match your site's design.

内容的提问来源于stack exchange，提问作者user3517199