根据文本框值突出显示表格单元格

时间:2013-05-03 05:14:33

标签: jquery html-table textbox

我想突出显示与textbox具有相似值的表格单元格;即当用户开始自己输入字母时,它应该突出显示表格单元格....

<input type="text" id="txtsearch"/>  
<html>
<table id="table" style="height:350px;margin-left:1em;width:700px;">
    <!--this is my table header-->
    <tr style="display:table-row">
        <th class="checkbox"><input type="checkbox"/></th>
        <th class="Name">NAME</th>
        <th class="Score">SCORE</th>
        <th class="Email">EMAIL</th>
        <th class="Empty"></th>
    </tr>
    <tr>
        <!--tabledata-->
        <td ><input type="checkbox" /></td>
        <td >Vijay Prakash</td>
        <td >34</td>
        <td >vijay@gmail.com</td>
        <td ></td>
    </tr>
</table>
<input type="button" id="btnCalculate" value="Calculate"/>
<label>Average:</label>
<label id="lblAverage"></label>
<label>Max:</label>
<label id="lblMax"></label>
</form>
</html>   
</div> 

3 个答案:

答案 0 :(得分:2)

使用keyup():contains

试试这个:

 $('#textBoxID').keyup(function(){
     $('td').css("background-color",''); 
     var value= $(this).val();
     $('td:contains("'+value+'")').css("background-color",'red');
 });

<强>更新

我正在创建一个新方法containsIN,其工作方式与jQuery一样,并使其不区分大小写:

 $.extend($.expr[":"], {
   "containsIN": function(elem, i, match, array) {
      return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] ||  "").toLowerCase()) >= 0;
    }
 });

  $('#textBoxID').keyup(function(){
      $('td').css("background-color",''); 
     var value= $(this).val();
     $('td:containsIN("'+value+'")').css("background-color",'red');
 });

working fiddle

答案 1 :(得分:2)

如果您想要一个不区分大小写的包含方法,可以尝试以下方法:

    $("#text-box-id").keyup(function() {
        var value = $(this).val().toLowerCase();
        // you can add a class to the ones you want to be able to 
        // highlight and use like this
        $("td.highlightable").each(function(index, elem) {
            var $elem = $(elem);
            if (value.length > 0 && $elem.text().toLowerCase().indexOf(value) != -1) {
                $elem.css('backgroundColor', 'yellow');   
            }
            else {
                $elem.css('backgroundColor', ''); 
            }
        });
    });

http://jsfiddle.net/3leven11/s4tRu/2/

答案 2 :(得分:0)

$('#SearchBox').on('keyup', function () {
                var textboxValue = $('#SearchBox').val();
                $('table td').each(function () {


                    if ($(this).text().indexOf(textboxValue) === 0) {
                        $(this).addClass('highlight');
                    } else {
                        $(this).addClass('t');
                    }
                });
            });