Question

我想在我的表格中使用jQuery进行实时过滤。

例如：我想只显示name列包含的行＆＃34; a＆＃34;和列自由职业者选择输入设置为＆＃34;是＆＃34;。

我找到了一些基于文本输入全文过滤的解决方案，以及一些基于选择输入的解决方案，但没有任何地方是两者的组合。有没有办法在没有数据表或类似插件的情况下怎么做？

我会欣赏每一个提示！

＆＃13;

<table id="testTable">
    <thead>
        <tr>
            <th>Name <input type="text" name="name"></th>
            <th>Surname <input type="text" name="surname" /></th>
            <th>City <select name="city">
                        <option value="NY">NY</option>
                        <option value="NJ">NJ</option>
                     </select>       
            </th>
            <th>Freelancer <select name="freelancer">
                                <option value="yes">yes</option>
                                <option value="no">no</option>
                            </select>  
            </th>
        </tr>
    </thead>
    <tbody>
        <tr><td>John</td><td>Smith</td><td>NJ</td><td>yes</td></tr>
        <tr><td>Luke</td><td>Jones</td><td>NY</td><td>no</td></tr>
        <tr><td>Jack</td><td>White</td><td>NY</td><td>yes</td></tr>
        <tr><td>Abby</td><td>Scott</td><td>NJ</td><td>yes</td></tr>
        <tr><td>Luke</td><td>Price</td><td>NY</td><td>no</td></tr>
    </tbody>
</table>

＆＃13;

Answer 1

这是一个为你的第一列工作的小代码笔，基本上我只是在每次用户键入一个新字母时检索输入的值，我将遍历所有数组并检查名称是否包含输入。 / p>

首先，您需要在输入中添加一个ID：

id="name" // just an example

我在你的第一个td中添加了一个类名：

class="name"

然后你可以在js文件中添加方法

$('#name').keyup(function () {
  var tr = $('.name')
  var input = $('#name').val()
  tr.each(function() {
    console.log($(this).html().indexOf(input))
    if($(this).html().indexOf(input) >= 0){
      $(this).parent().show()
    }
    else{
      $(this).parent().hide()      
    }
  })
})

https://codepen.io/anon/pen/dmrKxm

我希望它能帮到你

使用jQuery

1 个答案: