javascript - SPA - search html table -

i'm building single page application in have html table , need implement search box loops through rows of table , hides ones don't match search-box text. problem being spa javascript code found on internet thing based on $(document).ready(function() doesn't work. tried folowing approach:

in viewmodel.js have:

 function filter2(search, tbldata) {          window.phrase = document.getelementbyid(search).value;          var words = window.phrase.tolowercase().split(" ");         var table = document.getelementbyid(tbldata);         var ele;         (var r = 1; r < table.rows.length; r++) {             ele = table.rows[r].innerhtml.replace(/<^>+>/g, "");             var displaystyle = 'none';             (var = 0; < words.length; i++) {                 if (ele.tolowercase().indexof(words[i]) >= 0)                     displaystyle = '';                 else {                     displaystyle = 'none';                     break;                 }             }             table.rows[r].style.display = displaystyle;         }      } 

and in view.html:

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

,where tbldata html table , search searchbox. not working, if has idea please share. thank in advance.

edit: html table:

<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> 

don't vanilla javascript dom manipulations if use knockout. filtering quite simple, have keep observablearray of elements, , declare computed returns filtered elements. simple example, see model:

function model() {     var self =     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;         });     });  } 

with html:

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

you can test here: http://jsfiddle.net/qfybw/1/