-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 >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>
4

3 回答 3

3

使用keyup()和:contains。

尝试这个：

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

更新

我正在创建一个新方法containsIN，它像 jQuery contains 一样工作，并使其不区分大小写：

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

工作小提琴

于 2013-05-03T05:17:42.477 回答
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/

于 2013-05-03T05:36:20.777 回答
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');
                    }
                });
            });
于 2013-05-03T05:33:49.190 回答