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搜索刪除表格行

回答

相關問題