SPA - 搜索html表格

我正在構建一個單頁面應用程序，其中我有一個html表格，我需要實現一個搜索框，通過表格的行循環並隱藏與搜索不匹配的搜索框盒文本。問題是作爲一個SPA我在互聯網上找到的所有javascript代碼都是基於$（document）.ready（function（），所以它不起作用。我試着採用以下方法：SPA - 搜索html表格

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

來源

2013-07-31 Andrei Diaconu

有隔靴搔癢在這個問題開始回答您。您的''元素使用'data-bind'屬性，但不涉及您正在使用的任何框架。如果你不使用框架，你需要某種onclick處理程序。沒有看到你的表/數據我不知道你的'innerHTML.replace'是否正在運行..或者如果你應該使用'innerText'（我相信它被稱爲。）如果你*使用一個框架，並且你已經檢查以確保調用了「filter2」，您需要檢查控制檯日誌中是否有錯誤。 –

ty爲答覆。我用html表格編碼了帖子。對於data0binding，我使用了knockout.js。 –

，如果您使用的淘汰賽不要做香草的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-31 09:50:30 mael

SPA - 搜索html表格

回答

相關問題