基于文本框值突出显示表格单元格

-1

我想突出显示与文本框具有相似值的表格单元格;即当用户开始输入字母本身就应该突出显示表细胞....基于文本框值突出显示表格单元格

<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 >[email protected]</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>

来源

2013-05-03 Bharat Bhushan

这shud突出匹配的表格单元格 – 2013-05-03 05:15:45

我已经尝试过，并张贴了不同的答案只看到它.. 。我没有得到确切的输出结果，我想要的.datz reasn我发布在这里 – 2013-05-03 05:36:16

如果你想要一个不区分大小写包含方法，你可以尝试以下方法：

$("#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/

来源

2013-05-03 05:36:20 samazi

实际上，在突出显示单元格时，突出显示单元格包含特定字母的单元格，但是只有当它将成为第一个字母时才会突出显示 – 2013-05-03 05:50:12

即使索引是不是-1或零......即如果文本框的值是“vijay”，即使单元格包含“tttvijay”，它应该突出显示该单元格？ – 2013-05-03 06:08:53

该代码已经可以做到这一点：http://jsfiddle.net/3leven11/s4tRu/3/并在文本框中键入vijay – samazi 2013-05-05 04:03:40

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

来源

2013-05-03 05:17:42 bipen

应该是'$（'td：contains（'+ value +'）'）'而不是'$（'td：contains（value） '）' – Mysteryos 2013-05-03 05:19:53

已更新已经.. :) ..谢谢反正 – bipen 2013-05-03 05:20:27

它不工作..它突出所有的emailids，但不是名称...和n ot甚至匹配的mailids它突出显示的所有单元格的邮件列 – 2013-05-03 05:31:42

$('#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'); 
        } 
       }); 
      });

来源

2013-05-03 05:33:49

我使用上面的代码，但不知道为什么它突出显示emailid表格单元格......但不是表格单元格包含名称..我只想要突出显示的名称..是否有任何解决方案 – 2013-05-03 05:35:16

看到我的答案f或只突出显示特定的单元格 – samazi 2013-05-03 05:39:17

基于文本框值突出显示表格单元格

回答

相关问题