当RowFilter不匹配时显示消息

Show message when RowFilter doesn't match

本文关键字：显示 消息 不匹配 RowFilter      更新时间：2023-09-26

我正在为我的表创建一个带有JavaScript的RowFilter，一切工作正常，但当搜索输入的文本不匹配时，我想显示一条消息(没有发现结果…表内<但我不知道怎么做，这是我的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

中的演示

工作示例

我试图在js函数的else部分显示警告，但警告显示了很多次(而row = table.rows[r++])。

这是原始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变量用于跟踪是否匹配任何结果。当它为真时，隐藏#no-results，当它为假时，显示它

试试

$(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();

    })
})

最终代码:

<html>
    <title>This is test</title>
    <head>
        <style>
            .no {
                border: 1px solid gray;
                text-align: center;
                background-color: skyblue;
                padding: 5px;
                color: #fff;
                display: none;
            }
        </style>
    </head>
    <body>
       <div class="container">
  <input class="form-control" type="text" id="buscar" placeholder="search..." />
  <hr />
           <div class="no">No Result</div>
  <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>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
$(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();
        
                      
    })
})
        </script>
    </body>
</html>

相关文章：