篩選錶行 - 優文庫

我在我的聚合物元件具有桌子，我希望它按照輸入字段提供篩選錶行

<polymer-element name="my-element"> 
<template> 
<paper-input label="Search" floatingLabel="false" class="search-main" on-keyup="{{search}}"></paper-input> 
<table id="table"> 
    <thead> 
     <tr> 
      <th>First Name</th> 
      <th>Middle Name</th> 
      <th>Last Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John</td> 
      <td>Cr</td> 
      <td>Smith</td> 
     </tr> 
     <tr> 
      <td>keety</td> 
      <td>cros</td> 
      <td>bran</td> 
     </tr> 
    </tbody> 
</table> 
</template> 
<script> 
    Polymer('my-element', { 
     search: function() { 
      var rows = this.$.table.querySelector('tr'); 
      var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ')', 
      reg = RegExp(val, 'i'), 
      text; 

      $(rows).show().filter(function() { 
       text = $(this).text().replace(/\s+/g, ' '); 
       return !reg.test(text); 
      }).hide();     
     } 
    }) 
    ; 
</script> 
</polymer-element>

沒有得到任何控制檯錯誤，但過濾器不是關鍵字過濾行工作

我是新來的聚合物，所以請告訴我做錯了什麼？

來源

2015-06-21 Tanya Sinha

根據聚合物文檔，'這一點。$訪問。表'引用應該引用id爲'table'的元素，但是你的表沒有id屬性。嘗試將'

'更改爲'

'。 –

哦，這是在我的代碼，無意中，它得到deletd在這裏，我...我編輯我的帖子 –

回答

方法querySelector只返回第一個元素，在你的情況是<tr>在<thead>。您需要改爲使用querySelectorAll，並在<tbody>中只選擇<tr>。

替換：

var rows = this.$.table.querySelector('tr');

有：

var rows = this.$.table.querySelectorAll('tbody tr');

此外，它似乎並不$(this).val()是訪問的<paper-input>價值的正確方法。你需要改變你的<paper-input>到：

<paper-input label="Search" floatingLabel="false" value="{{searchVal}}" class="search-main" on-keyup="{{search}}"></paper-input>

然後你就可以訪問它的價值，而不是this.searchVal的$(this).val()在你的代碼。

來源

2015-06-21 16:05:55

已經試過你的代碼，但仍然我的行不過濾 –

是的，在的情況下，我們不能使用$（this）.val （）...我發佈了我的問題的答案，但thanx指出錯誤 –

<polymer-element name="my-element"> 
<template> 
<paper-input label="Search" floatingLabel="false" value="{{valHeader}}" class="search-main" on-keyup="{{search}}"></paper-input> 
<table id="table"> 
<thead> 
    <tr> 
     <th>First Name</th> 
     <th>Middle Name</th> 
     <th>Last Name</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>John</td> 
     <td>Cr</td> 
     <td>Smith</td> 
    </tr> 
    <tr> 
     <td>keety</td> 
     <td>cros</td> 
     <td>bran</td> 
    </tr> 
</tbody> 
</table> 
</template> 
<script> 
Polymer('my-element', { 
    search: function() { 
      var rows = this.$.table.querySelectorAll('tbody tr'); 
      var val = '^(?=.*\\b' + $.trim(this.valHeader).split(/\s+/).join('\\b)(?=.*\\b') + ')', 
      reg = RegExp(val, 'i'), 
      text; 

      $(rows).show().filter(function() { 
       text = $(this).text().replace(/\s+/g, ' '); 
       return !reg.test(text); 
      }).hide();     
     } 
}) 
; 
</script> 
</polymer-element>

{{valHeader}}創建您的筆記列表elelemt內的財產被綁定到紙張輸入的輸入值，我們可以把它用this.valHeader

來源

2015-06-21 16:28:36

相關問題