jquery搜索删除表格行

我想做一个像搜索框。有如下HTML代码显示一个文本框和一个表：jquery搜索删除表格行

<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查找具有匹配值的表行。例如用户键入柠檬和jQuery将找到的表行与“柠檬”的价值和显示：无其他不具有柠檬值

，其结果将是：

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

来源

2011-11-20 sm21guy

我不知道你怎么はnt来激活搜索，所以我会假装你有一个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(); 
});

的$.trim调用是必要的如果您的HTML结束为：

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

如果您不是$.trim该行或单元格，则在.text返回值中最终会产生不需要的空白。没有很好的理由将代码的行为与HTML的精确格式紧密绑定。

来源

2011-11-20 04:48:18

感谢这项工作 – sm21guy

我可以使用文本框.keydown函数 – sm21guy

@ sm21guy：是的，如果您想检测到某人按Enter键，则可以这样做。此外，我错过了我的原始电话中的'parent（）'调用，所以我修复了这个问题;可能不会有任何视觉差异，但您确实想要隐藏行。 –

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

来源

2011-11-20 04:44:27 Artefacto

使用此代码，

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

来源

2011-11-20 04:46:28

'contains'也使它匹配'lemonfoobar'。 – Artefacto

[：：contains'选择器]（http://api.jquery.com/contains-selector/）选择“包含指定文本的所有元素”，但它不会完全匹配。 –

jquery搜索删除表格行

回答

相关问题