Javascript 当RowFilter不运行时显示消息'；不匹配

我正在用JavaScript为我的表创建一个行过滤器，一切正常，但当搜索输入的文本不匹配时，我想显示一条消息（在中的表内找不到结果），但我不知道具体如何做，这是我的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>

这里是JSFIDLE中的一个演示

---

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

这里是原始JSFIDLE的一个分支，当没有搜索结果时，它会显示一条消息

首先，将要显示的元素添加到表上方（或中）的HTML中

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

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

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，则隐藏

#无结果

，如果为false，则显示它。

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

首先，将要显示的元素添加到表上方（或中）的HTML中

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

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

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

变量用于跟踪是否有匹配的结果。如果为真，则隐藏“无结果”，如果为假，则显示“无结果”。

试试看

$(document).ready(function(){

    $("#buscar").on("input",function(){

        $value = $(this).val();

        $("tr").not(":first").hide();

        $len = $("td:contains(" + $value + ")").closest("tr").show().length;

        if($len < 1)
            $(".no").show(1000);

        else
            $(".no").hide();


    })
})

$（文档）.ready（函数（）{
$（“#客车”）。在（“输入”，函数（）上{
$value=$（this.val（）；
$（“tr”）.not（“：first”）.hide（）；
$len=$（$td:contains（“+$value+”）。最近的（$tr”）.show（）.length；
如果（$len<1）
元（“.no”）。展览（1000）；
其他的
$（“.no”）.hide（）；
})
})

最终代码：

这是测试
不{
边框：1px纯色灰色；
文本对齐：居中；
背景色：天蓝色；
填充物：5px；
颜色：#fff；
显示：无；
}

无结果
身份证件
名称
水平仪
1.
这是我的名字
45级大师
2.
这是我的名字2号
一级大师
3.
这是我的名字3号
四级策划

$（文档）.ready（函数（）{
$（“#客车”）。在（“输入”，函数（）上{
$value=$（this.val（）；
$（“tr”）.not（“：first”）.hide（）；
$len=$（$td:contains（“+$value+”）。最近的（$tr”）.show（）.length；
如果（$len<1）
元（“.no”）。展览（1000）；
其他的
$（“.no”）.hide（）；
})
})

试试看

$(document).ready(function(){

    $("#buscar").on("input",function(){

        $value = $(this).val();

        $("tr").not(":first").hide();

        $len = $("td:contains(" + $value + ")").closest("tr").show().length;

        if($len < 1)
            $(".no").show(1000);

        else
            $(".no").hide();


    })
})

$（文档）.ready（函数（）{
$（“#客车”）。在（“输入”，函数（）上{
$value=$（this.val（）；
$（“tr”）.not（“：first”）.hide（）；
$len=$（$td:contains（“+$value+”）。最近的（$tr”）.show（）.length；
如果（$len<1）
元（“.no”）。展览（1000）；
其他的
$（“.no”）.hide（）；
})
})

最终代码：

这是测试
不{
边框：1px纯色灰色；
文本对齐：居中；
背景色：天蓝色；
填充物：5px；
颜色：#fff；
显示：无；
}

无结果
身份证件
名称
水平仪
1.
这是我的名字
45级大师
2.
这是我的名字2号
一级大师
3.
这是我的名字3号
四级策划

$（文档）.ready（函数（）{
$（“#客车”）。在（“输入”，函数（）上{
$value=$（this.val（）；
$（“tr”）.not（“：first”）.hide（）；
$len=$（$td:contains（“+$value+”）。最近的（$tr”）.show（）.length；
如果（$len<1）
元（“.no”）。展览（1000）；
其他的
$（“.no”）.hide（）；
})
})

@F.Flores，检查我的答案@弗洛雷斯，检查我的答案！