Question

我正在构建一个单页应用程序，其中我有一个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;
        }

    }

并在我的view.html中：

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

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

编辑：这是我桌子的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>

Answer 1

如果你使用淘汰赛，不要做vanilla javascript DOM操作。过滤非常简单，你只需要保留所有元素的observableArray，并声明一个返回过滤元素的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>

您可以在此处进行测试：http://jsfiddle.net/qFYbW/1/

SPA - 搜索html表

1 个答案: