Question

我在我的聚合物元素中有一个表，我希望它根据输入字段中提供的关键字过滤行

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

没有出现任何控制台错误，但过滤器无法正常工作

我是聚合物的新手，所以请告诉我我做错了什么？

Answer 1

方法querySelector仅返回第一个元素，在<tr>中为<thead>。您需要使用querySelectorAll代替<tr>中的<tbody>。

替换：

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()访问其值。

Answer 2

 <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}}在您的note-list elelemt中创建一个属性，该属性绑定到纸张输入的输入值，我们可以使用this.valHeader

访问它

过滤聚合物元素中的表行

2 个答案: