Question

我是jquery用法的新手。我从互联网上复制了一个工作示例，用于使用jquery过滤表行。该表包含2列和相应的值。但是当我按照说明使用jquery运行程序来过滤行时，我无法使用查询过滤行。我不知道我的错误在哪里，并且不知道jquery是否真的发生了。这是我在JSP页面的头部分中包含的代码

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script><script type= "text/javascript">
$("#searchInput").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    $.each(data, function(i, v) {
        rows.filter(":contains('" + v + "')").show();
    });
});

这是我在JSP页面的正文部分中包含的代码，它包含带条目的表

<body> <input id="searchInput" placeholder="Type To Filter"><br/><table>
<thead>
<tr><th>Column1</th>
<th>Column2</th></tr>
</thead>
<tbody id="fbody">
<tr><td>cat</td><td>one</td></tr>
<tr><td>dog</td><td>two</td></tr>
<tr><td>cat</td><td>three</td></tr>
<tr><td>moose</td><td>four</td>
</tr><tr><td>mouse</td><td>five</td>
</tr><tr><td>dog</td><td>six</td>
</tr></tbody>
</table>
</body>

请指导我。

Answer 1

在ready块中添加JQuery代码：

$(document).ready(function() {

  // your code

});

在文档完全加载之前，您不能引用元素（如$('#mydiv')）。

更改您的代码，如：

$(document).ready(function() {
  $("#searchInput").keyup(function() {
      var rows = $("#fbody").find("tr");
      $.each(rows, function() {
       $(this).hide();
      });
      var data = $(this).val().split(" ");
      $.each(data, function(i, v) {
        rows.filter(":contains('" + v + "')").show();
      });
  });
});

Answer 2

document.ready是必需的，如beloe所示

 $(document).ready(function() {

  // code

});

所以你的案例代码如下所示

$(document).ready(function() {
  $("#searchInput").keyup(function() {
      var rows = $("#fbody").find("tr");
      $.each(rows, function() {
       $(this).hide();
      });
      var data = $(this).val().split(" ");
      $.each(data, function(i, v) {
        rows.filter(":contains('" + v + "')").show();
      });
  });
});

Answer 3

你的脚本标签不正确也将其包装在document.ready：

中

<script type= "text/javascript"> 
$(document).ready(function(){

$("#searchInput").keyup(function() {

var rows = $("#fbody").find("tr").hide(); 
var data = this.value.split(" "); 
$.each(data, function(i, v) { 
rows.filter(":contains('" + v + "')").show(); 

     }); 
 });


});
</script>

以及最新的jquery on优先：

$("#searchInput").on('keyup',function() { 
var rows = $("#fbody").find("tr").hide(); 
var data = this.value.split(" "); 
$.each(data, function(i, v) { 
rows.filter(":contains('" + v + "')").show(); 
});
});

Jquery脚本没有触发

3 个答案: