javascript - RowFilter 不匹配时显示消息

Question

我正在为我的表创建一个带有 JavaScript 的 RowFilter，一切正常，但是当搜索输入中的文本不匹配时，我想显示一条消息(未找到结果...在 的表内) )但我不知 Prop 体该怎么做，这是我的 HTML:

<div class="container">
  <input class="form-control" type="text" id="buscar" placeholder="search..." />
  <hr />
  <div class="row">
    <table class="table table-striped" id="Tabla">
      <thead>
        <tr>
          <td>ID</td>
          <td>Name</td>
          <td>Level</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>This is my name</td>
          <td>Level Master 45</td>
        </tr>
        <tr>
          <td>2</td>
          <td>This is my name number 2</td>
          <td>Level Master 1</td>
        </tr>
        <tr>
          <td>3</td>
          <td>This is my name number 3</td>
          <td>Level Mastermind 4</td>
        </tr>
      </tbody>
    </table>

    <hr />

  </div>

</div>

这是 JS:

$(document).ready(function () {
    RowFilter();
});

function RowFilter() {
  var busqueda = document.getElementById('buscar');
  var table = document.getElementById("Tabla").tBodies[0];

  buscaTabla = function() {
    texto = busqueda.value.toLowerCase();
    var r = 0;
    while (row = table.rows[r++]) {
      if (row.innerText.toLowerCase().indexOf(texto) !== -1)
        row.style.display = null;
      else {
        row.style.display = 'none';
      }
    }
  }

  busqueda.addEventListener('keyup', buscaTabla);

}

这是 JSFiddle 中的演示

Working Example

我尝试在 js 函数中的 while 的 else 部分显示警报，但警报显示了很多次(while row = table.rows[r++])。提前致谢。

Answer 1

这是原始 JSFiddle 的一个分支，它在没有搜索结果时显示一条消息。

https://jsfiddle.net/reid_horton/yg98jqcj/

首先，将您想要显示的元素添加到表格上方(或表格中)的 HTML 中。

<div id="no-results">
  No results!
</div>

将其设置为默认隐藏。

#no-results {
  display: none;
}

要检测何时没有搜索结果，请将循环更改为此。

var didMatch = false;
var r = 0;
while (row = table.rows[r++]) {
  if (row.innerText.toLowerCase().indexOf(texto) !== -1) {
    row.style.display = null;
    didMatch = true;
  } else {
    row.style.display = 'none';
  }
}
if (!didMatch) {
    noResults.style.display = 'block';
} else {
    noResults.style.display = 'none';
}

didMatch 变量用于跟踪是否有匹配的结果。当它为 true 时，您隐藏#no-results，当它为 false 时，您显示它。