筛选表行

我在我的聚合物元件具有桌子，我希望它按照输入字段提供筛选表行

<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

回答

相关问题