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

更新しました

containsINjQuery のように機能し、大文字と小文字を区別しない新しいメソッドを作成しています。

 $.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 に答える