搜索HTML表格 [英] Searching HTML Table

问题描述

我用HTML创建了一个表格，并且想要集成一个搜索框。我怎么做？你可以推荐一个好的jQuery插件或更好的完整教程吗？

解决方案

使用jQuery的快速和肮脏的方法：

  $（document）.ready（
 function（）{
 $（'＃searchbox'）。keyup（ 
 function（）{
 var searchText = $（this）.val（）; 
 if（searchText.length> 0）{
 $（'td：contains（' + searchText +'）'）
 .css（'background-color'，'＃f00'）; 
 $（'td：not（：contains（'+ searchText +'））'）
 .css（'background-color'，'＃fff'）; 
} 
}）; 
}）; 
  

使用以下（x）html：

 <表> 
< thead> 
< tr> 
< td colspan =2> 
< label for =searchbox>搜寻：< / label> 
< input type =textid =searchbox/> 
< / td> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td>东西< / td> 
< td>更多文字< / td> 
< / tr> 
< tr> 
< td> Lorem ipsum< / td> 
< td> blah？< / td> 
< / tr> 
< / tbody> 
< / table> 
  

JS Fiddle演示。

---

已编辑以供使用 addClass（） / removeClass（） ，而不是在jQuery中设置css ：

$ $ $ $ $ $ $ $'$ search $' ）.keyup（
function（）{
var searchText = $（this）.val（）;
if（searchText.length> 0）{
$（'td ：包含（'+ searchText +'）'）
.addClass（'searchResult'）;
$（'td：not（：contains（'+ searchText +'））'）
。 removeClass（'searchResult'）;
}
else if（searchText.length == 0）{
$（'td.searchResult'）
.removeClass（'searchResult'）;
}
}）;
}）;

JS小提琴演示。

---

淡入淡出表格单元， t包含搜索结果，您可以使用以下内容：

jQuery：

 <$ c $ （
 $（'＃searchbox'）。keyup（
 function（）{
 var searchText = $（this） .val（）; 
 
 if（searchText.length> 0）{
 $（'tbody td：contains（'+ searchText +'）'）
 .addClass（' searchResult'）; 
（'。searchResult'）
 .not（'：contains（'+ searchText +'）'）
 .removeClass（'searchResult'）; 
 
 $（'tbody td'）
 .not（'：contains（'+ searchText +'）'）
 .addClass（ 'faded'）; 
 $（'。faded：contains（'+ searchText +'）'）
 .removeClass（'faded'）; 
} 
 else if（searchText.length == 0）{
 $（'。searchResult'）。removeClass（'searchResult'）; 
 $（'。faded'）。removeClass（'faded'）; 
} 
}）; 
}）; 
  

css：

  td.faded {
 opacity：0.2; 
} 
  

JS小提琴演示。

I have created a table with HTML and want to integrate a search box. How do i do that? Can you recommend a good jQuery plugin or better a complete tutorial?

解决方案

A quick and dirty approach, using jQuery:

$(document).ready(
    function(){
        $('#searchbox').keyup(
            function(){
                var searchText = $(this).val();
                if (searchText.length > 0){
                    $('td:contains(' + searchText +')')
                        .css('background-color','#f00'); 
                    $('td:not(:contains('+searchText+'))')
                        .css('background-color','#fff');
                }
            });
    });

With the following (x)html:

<table>
    <thead>
        <tr>
            <td colspan="2">
                <label for="searchbox">Search:</label>
                <input type="text" id="searchbox" />
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Something</td>
            <td>More text</td>
        </tr>
        <tr>
            <td>Lorem ipsum</td>
            <td>blah?</td>
        </tr>
    </tbody>
</table>

JS Fiddle demo.

---

Edited to use addClass()/removeClass(), in place of setting the css in the jQuery itself:

$(document).ready(
    function(){
        $('#searchbox').keyup(
            function(){
                var searchText = $(this).val();
                if (searchText.length > 0){
                    $('td:contains(' + searchText +')')
                        .addClass('searchResult'); 
                    $('td:not(:contains('+searchText+'))')
                        .removeClass('searchResult');
                }
                else if (searchText.length == 0) {
                    $('td.searchResult')
                        .removeClass('searchResult');
                }
            });
    });

Demo at JS Fiddle.

---

To fade out the table cells that don't contain the search result you can use the following:

jQuery:

$(document).ready(
    function(){
        $('#searchbox').keyup(
            function(){
                var searchText = $(this).val();

                if (searchText.length > 0) {
                    $('tbody td:contains('+searchText+')')
                        .addClass('searchResult');
                    $('.searchResult')
                        .not(':contains('+searchText+')')
                        .removeClass('searchResult');

                    $('tbody td')
                        .not(':contains('+searchText+')')
                        .addClass('faded');
                    $('.faded:contains('+searchText+')')
                        .removeClass('faded');
                }
                else if (searchText.length == 0) {
                    $('.searchResult').removeClass('searchResult');
                    $('.faded').removeClass('faded'); 
                }
            });
    });

css:

td.faded {
    opacity: 0.2;
}

Demo at JS Fiddle.

这篇关于搜索HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！