Javascript SPA-搜索html表

我正在构建一个单页应用程序，其中有一个html表，我需要实现一个搜索框，该搜索框在表的行中循环，并隐藏与搜索框文本不匹配的行。问题是，作为SPA，我在互联网上找到的所有javascript代码都是基于$（document）.ready（function（））的，所以它不起作用。我尝试了以下方法：

在我的viewmodel.js中，我有：

 function filter2(search, tblData) {

        window.phrase = document.getElementById(search).value;

        var words = window.phrase.toLowerCase().split(" ");
        var table = document.getElementById(tblData);
        var ele;
        for (var r = 1; r < table.rows.length; r++) {
            ele = table.rows[r].innerHTML.replace(/<^>+>/g, "");
            var displayStyle = 'none';
            for (var i = 0; i < words.length; i++) {
                if (ele.toLowerCase().indexOf(words[i]) >= 0)
                    displayStyle = '';
                else {
                    displayStyle = 'none';
                    break;
                }
            }
            table.rows[r].style.display = displayStyle;
        }

    }

函数过滤器2（搜索，tblData）{
window.phrase=document.getElementById（search）.value；
var words=window.phrase.toLowerCase（）.split（“”）；
var table=document.getElementById（tblData）；
var-ele；
对于（var r=1；r/g，“”；
var displayStyle='none'；
for（var i=0；i=0）
displayStyle=''；
否则{
displayStyle='none'；
打破
}
}
table.rows[r].style.display=displayStyle；
}
}

在my view.html中：

 <input type="text" id="search"  placeholder="Search..." data-bind="click: filter2"/>

，其中tblData是我的html表，search是我的搜索框。 这不起作用，如果有人有任何想法，请分享。提前谢谢

编辑：这是我的表格的html：

<table id="tblData"class="table table-striped" > 
        <thead>
            <tr><th>Domain Name</th><th>Full name</th><th style="text-align:center">Email</th></tr>
        </thead>
        <tbody data-bind="foreach: employee">
            <tr>
                <td style="width:100px" data-bind="text: username"></td>
                <td style="width:120px"data-bind="text: fullName"></td>
                <td style="text-align:right;width:120px" data-bind="text: email"></td>
            </tr>
        </tbody>
    </table>

域名全名电子邮件

如果使用knockout，不要进行普通的javascript DOM操作。过滤非常简单，只需保留所有元素的ObservalArray，并声明一个返回过滤元素的computed。 有关简单示例，请参见此模型：

function Model() {
    var self = this
    this.input = ko.observable("");
    this.all = ko.observableArray(["John","James","Mark"]);
    this.filtered = ko.computed(function() {
        return ko.utils.arrayFilter(self.all(), function(item) {
            return item.indexOf(self.input()) !== -1;
        });
    });

}

使用此HTML：

<input placeholder="Type to filter" data-bind="value: input, valueUpdate: 'keyup'"/>
<ul data-bind="foreach: filtered">
    <li data-bind="text: $data"></li>
</ul>

---

您可以在这里进行测试：

这个问题远远不够回答您的问题。您的

元素使用了

数据绑定

属性，但您没有引用您正在使用的任何框架。如果您没有使用框架，您需要某种onclick处理程序。在没有看到表/数据的情况下，我无法判断您的

innerHTML.replace

正在运行..或者如果您应该使用

innerText

（我相信它被调用了。）如果您使用的是框架，并且您已经检查以确保调用了

filter2

，则需要检查控制台日志中的errors.ty以获得回复。我已使用html表代码编辑了文章。对于data0binding，我使用的是knockout.js。