Question

我需要使用下拉列表在html表中实现一个搜索框，这样我就可以按特定的列名标题搜索数据。

<table>
  <thead>
     <tr>
        <th>Fruit</th>
        <th>Color</th>
     </tr>
  </thead>
    <tr>
        <td>Apple</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Grapes</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td>Orange</td>
    </tr>
</table>

我得到了Fiddle，但这在eclipse中不起作用。

Answer 1

您可以编写简单的脚本，为正确的列和列值添加CSS类。例如：

$("tr:first-child").addClass('fruits');

（您可以为第N列添加自定义类，例如＆＃39; .fruits＆＃39;不仅是第一个孩子，它只是一个例子）

然后你可以编写简单的自定义过滤器（用名称中的＆＃39; Z＆＃39;字母搜索水果），如：

var resultsOfSearchingFruitsWithZLetter = [];
$.each($('.fruits'), function(val) {
    if(val.val().indexOf('z') > -1) {
        resultsOfSearchingFruitsWithALetter.push(val.val());
    }
});

如何根据特定列值在表中搜索？

1 个答案: