基於用戶輸入的jQuery錶行選擇器

如何根據輸入框中的內容選擇行？這是我到目前爲止有：基於用戶輸入的jQuery錶行選擇器

<html> 
<head> 
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("jquery", "1"); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#btnFilter').keyup(function() { 
     var myInput = $(this).val(); 
     $('tbody tr').hide(); 
     // I need to .show() all table rows that have a table cell with a value that begins with the input field. 
     $('tr').something goes here.show(); 
    }); 
}); 
</script> 
</head> 
<body> 
<form> 
    <input id="btnFilter" name="btnFilter"> 
</form> 
<table> 
    <thead> 
     <tr> 
      <th>Heading 1</th> 
      <th>Heading 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>A</td> 
      <td>X</td> 
     </tr> 
     <tr> 
      <td>ABC</td> 
      <td>D</td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html>

來源

2010-10-04 Phillip Senn

不是一個直接的答案，但如果您正在尋找一種方法來過濾表格，請查看http://www.datatables.net/。它在jQuery中，直接使用你的html表結構並支持分頁，過濾，排序等等。這是一個很棒的插件。 – lpfavreau 2010-10-04 15:42:14

如果你想搜索，:contains()可能是你在做什麼之後，例如：

$('tr:contains("' + myInput + '")').show();

You can try it out here，還是小區開始，只版本：

$('td').filter(function() { 
    return $.text([this]).indexOf(myInput) == 0 
}).parent().show();

You can try that version here。

來源

2010-10-04 15:36:49

Zounds！嘿，尼克！你在W-S？我在山核桃！蜜月如何？ – 2010-10-04 15:48:37

@cf_PhillipSenn - 優秀:)本週嘗試購買房子以及;） – 2010-10-04 15:50:44

$(document).ready(function() { 
    $('#btnFilter').keyup(function() { 
     var myInput = $(this).val(); 
     $('tbody tr').hide().find('td:contains("'+myInput+'")').parents('tr:first').show() 
    }); 
});

來源

2010-10-04 15:44:53

謝謝Praveen！ – 2010-10-04 16:22:51

基於用戶輸入的jQuery錶行選擇器

回答

相關問題