Question

我正在为我的表创建一个带有JavaScript的RowFilter，一切正常但是当搜索输入的文本不匹配时我想显示一条消息（找不到结果...在表格中＆lt; td＆gt;）但我不知道该怎么做，这是我的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部分中的警报，但警告很多次显示（而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变量用于跟踪是否有匹配的结果。如果是，则隐藏#no-results，如果为false，则显示它。

Answer 2

试试吧

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


    })
})

最终代码：

＆＃13;

<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>

＆＃13;

当RowFilter与

2 个答案: