Question

我想制作类似搜索框的内容。有一个文本框和一个表格，如下面的html代码所示：

<input id="sbox" type="text" class="textbox" value=""></input>
<table>
  <tr><td>lemon</td></tr>
  <tr><td>orange</td></tr>
  <tr><td>watermelon</td></tr>
  <tr><td>coconut</td></tr>
</table>

如何使用jQuery查找具有匹配值的表行。例如，用户输入 lemon ，jquery将找到带有“lemon”值的表格行，显示：没有其他没有柠檬值的用户

结果将是：

<input id="sbox" type="text" class="textbox" value=""></input>
<table>
  <tr><td>lemon</td></tr>
  <tr style="display:none;"><td>orange</td></tr>
  <tr style="display:none;"><td>watermelon</td></tr>
  <tr style="display:none;"><td>coconut</td></tr>
</table>

Answer 1

$('td')
    .filter(function() { return $(this).text() != 'lemon'; })
    .closest('tr')
    .hide()

Answer 2

使用此代码，

$("tr").hide();
$("td:contains('lemon')").parents('tr').show();

Answer 3

我不确定你想如何激活搜索，所以我假装你有一个id为“go”的按钮。您可以像这样使用filter：

$('#go').click(function() {
    var want = $.trim($('#sbox').val());
    $('table tr > td').filter(function() {
        return $.trim($(this).text()) != want;
    }).parent().hide();
});

演示：http://jsfiddle.net/ambiguous/qWaDs/2/

如果您想要不区分大小写的搜索，可能需要添加一些toLowerCase次调用：

$('#go').click(function() {
    var want = $.trim($('#sbox').val()).toLowerCase();
    $('table tr > td').filter(function() {
        return $.trim($(this).text()).toLowerCase() != want;
    }).parent().hide();
});

如果您的HTML结果为：

，则必须进行$.trim次调用

<tr>
    <td>
        lemon
    </td>
</tr>
<!--...-->

如果您没有$.trim该行或单元格，您的.text返回值中会出现不需要的空格。没有充分的理由将代码的行为与HTML的精确格式绑定得太紧。

jquery搜索删除表行

3 个答案: