0

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

1 回答 1

1

如果您使用淘汰赛，请不要进行 vanilla javascript DOM 操作。过滤非常简单，你只需要保留所有元素的 observableArray，并声明一个返回过滤元素的计算。举个简单的例子，看看这个模型：

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/

于 2013-07-31T09:50:30.710 回答