Question

我在JS小提琴中有一个工作的javascript但是当复制到html文件时它不能完全正常工作。我已经检查了与同一主题相关但没有解决方案的其他帖子。过滤器无法正常工作

HTML代码

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script>
        $(document).ready(function(){
            var table = document.getElementById("table");
            table.innerHTML = "";
            for (var i = 0; i < 6; i++) {
                var js = "apple";
                var tr = document.createElement("tr");
                var td = document.createElement("td");

                td.innerHTML = js + i ;
                tr.appendChild(td);
                table.appendChild(tr);
            }});

            $(function() {
                var $rows = $('tr');
                $('#search').keyup(function() {
                    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
                    $rows.show().filter(function() {
                        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                        return !~text.indexOf(val);
                    }).hide();
                });
            });
    </script>
</head>
<body>
    <span class="data-heading right">
        Search:<input type="text" id="search" placeholder="Type to search">
    </span>
    <table id="table"></table>
</body>
</html>

Answer 1

添加$(document).ready(function()而不是onload

$(document).ready(function() {
var table = document.getElementById("table");

table.innerHTML = "";
for (var i = 0; i < 6; i++) {
  var js = "apple";
  var tr = document.createElement("tr");
  var td = document.createElement("td");

  td.innerHTML = js + i ;
  tr.appendChild(td);
  table.appendChild(tr);
}


var $rows = $('tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});
});

Answer 2

您在页面加载时如何使用jQuery触发操作时感到困惑。

此部分在加载DOM时执行

$(function() {
  ... everything here runs when the page is loaded
});

还有另一种写同样的方法

$(document).ready(function(){
  .... totally same as above code.
});

所以，在你的情况下，你可以摆脱onload = function x()部分并将其全部放在现有的“onload”函数中（不需要第二个！）

$(function() {
    var table = document.getElementById("table");
    table.innerHTML = "";
    for (var i = 0; i < 6; i++) {
        var js = "apple";
        var tr = document.createElement("tr");
        var td = document.createElement("td");

        td.innerHTML = js + i ;
        tr.appendChild(td);
        table.appendChild(tr);
    }


    var $rows = $('tr');
    $('#search').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
        $rows.show().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
    });
});

Answer 3

请勿将您的代码放入<head>部分。将其移至<body>标记的底部：

Search:
<input type="text" id="search" placeholder="Type to search">
<table id='here_table'></table>
<script>
var table = document.getElementById("here_table");
table.innerHTML = "";
for (var i = 0; i < 6; i++) {
  var js = "apple";
  var tr = document.createElement("tr");
  var td = document.createElement("td");

  td.innerHTML = js + i ;
  tr.appendChild(td);
  table.appendChild(tr);
}
function myFunction(index) {
  var cells = this.textContent;
  alert("Value of row " + cells + ' Index:' + index);
}

$(function() {
var $rows = $('tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});
});
</script>

https://jsfiddle.net/2vtppaov/

Answer 4

而不是keyup事件尝试keppress事件。它对我有用。

Javascript在html文件中不起作用

4 个答案: